How to force to see Vue.componenta function?

Question

Vue.js

Hello.
vue

// Экземпляр создан в другом файле
Vue.component("bla-bla", function(){
  computed: {
    move: function() {
      return 'название другого компонента';
    }
  }
});

HTML And it gives this error: move is not defined As I understand it, this function should be in the main instance, but I should have it in the component, how can I make it see it?
<component v-bind:is="move"></component>

Answer 1

v-bind:isshould be:

the name of a registered component, or
a component's options object

docs
-----

Vue.component("parent", {
    template:`
        <div>
            <menu-avtr @change-tab="onChangeTab"></menu-avtr> 
            <component :is="componentName"></component>
        </div>
    `,
    data: () => ({
        componentName: "form-inp",
    }),
    methods: {
        onChangeTab(name) {
            this.componentName = name; 
        },
    },
});
Vue.component("menu-avtr", {
    data: function() {
      return {
        punktsMenuAvtr: [ {text: 'Вход', tabs: "inp"}, {text: 'Регистрация', tabs: "reg"} ],
        currentTab: "inp"
      }
    },
    template: '<menu><li v-for="punkt in punktsMenuAvtr" @click="setTab(punkt.tabs)" v-bind:data-active=" currentTab === punkt.tabs ? true : false ">{{ punkt.text }}</li></menu>',
    methods: {
        setTab(tab) {
            this.currentTab = tab;
            this.$emit("change-tab", `form-${tab}`)
        },
    },
  });

Answer 2

This is the component template in which you have this: There, add the move function and do not forget to put the brackets so that its call occurs:<component v-bind:is="move"></component>
<component v-bind:is="move()"></component>

Answer 3

Here is the whole code

Vue.component("menu-avtr", {
    data: function() {
      return {
        punktsMenuAvtr: [ {text: 'Вход', tabs: "inp"}, {text: 'Регистрация', tabs: "reg"} ],
        currentTab: "inp"
      }
    },
    template: '<menu><li v-for="punkt in punktsMenuAvtr" @click="currentTab = punkt.tabs" v-bind:data-active=" currentTab === punkt.tabs ? true : false ">{{ punkt.text }}</li></menu>',
    computed: {
      movePunkts: function(){
        return 'form-' + this.currentTab
      }
    }
  });
  Vue.component("form-inp", {
    template: '<form>Вход</form>'
  });
  Vue.component("form-reg", {
    template: '<form>Регистрация</form>'
  });