.vue file is actually meant to make vue componentized. If not, you can manually add the desired component, put the component's style in the css file, and put the template and js in the component.
there are two ways, one is the global component:

Vue.component('my-component', {
  template:'',
   data:function(){
     return {}
}
})

the other is local components,
directly

  var   myComponentName = {
        template:"",
        data:function(){
        }
    }

I hope I can help you

.vue file is intended to make it easier for users to manage resources and reduce the cost caused by the previous dispersion of resources. In essence, it is not natively supported by HTML, so it is impossible to reference painlessly in traditional pages. So first of all, the subject needs to change his mind, give up the idea of introducing .vue files into traditional pages, and instead consider what your needs are and how best to meet them.

from my point of view, .vue was introduced to reuse vue components, especially those that have been developed elsewhere. Then this situation should obviously be "referenced anyway," so consider using an entry file to import and compile the .vue file.

Global registration is also a good way to use it as a component.