I instantiated a vue object in a js file, including two local components, and then I exported the objects of these two components with export (note that I am mounting a div of id=app at this time) as follows:

//
const search_input = {
    props:[..]
    ...
};
const book_list = {
      ...
};

//Vue
const app = new Vue({
    el:"-sharpapp",
    data:{
        bookList:[]
    },
    components:{
        "search-input":search_input,
        "book-list":book_list
    },
    methods:{
        ...
    },
    created() {
        axios.get("book.json")
        .then((res)=>{
            this.bookList = res.data
        })
    },
});

export  { book_list , search_input };

then I import these two components through import in another js file and use them in this other js file (note that what I instantiated at this time is also an id=app div, but not the same html file as above. That is to say, two separate HTML and two separate js files. ). As follows:

import { book_list , search_input } from "./vueFile.js";

const app = new Vue({
    el:"-sharpapp",
    data:{
        search_val:"",
        list:[]
    },
    components:{
        "search-input":search_input,
        "book-list":book_list
    },
    methods: {
        add(){
            alert(this.list)
        }
    },
    created(){
        var search_val = location.search.slice(1);
        this.search_val = decodeURIComponent(search_val);
        console.log(this.list)
        axios.get("book.json")
        .then((res)=>{
            res.data.map((value,index)=>{
                if(value.name.includes(this.search_val) == true || 
                    value.author.includes(this.search_val) == true){
                    this.list.push(value);
                }
            })
        })
        
    }
})

at this point, there is a problem with the second html and js. The data in the data cannot be found, and the click event cannot be triggered. Finally, it is solved by changing the div in the second html whose id is app to app2,Vue instance which is also mounted on the div of id=app2.
but I have a question. I only introduced two component modules through import. Is the Vue of the instance also introduced? Otherwise, why would two completely separate html files and js files conflict because of this? Ask the great god for an answer.