Web interview Vue custom components and calling methods

// Import the component to be displayed import mymodel from '../components/mymodel.vue'
export default {
  install: function (Vue) {
    // 1.0 Get the constructor of mymodel component object const Mymodel = Vue.extend(mymodel)
    // Add a method $model to all vue instances
    Vue.prototype.$model = function () {
      // To display a component: mymodel
      // 2.0 Create a component object const obj = new Mymodel()
      // 3.0 Display the component obj.show = true
      // 4.0 Get the html structure of the component object const html = obj.$mount().$el
      // 5.0 Render the html structure to the page document.body.append(html)
    }
  }
}

<template>
  <div>
    <h3>Call with normal component method</h3>
    <button @click="fn1">show Model</button>
    <!-- <mymodel :value="show" @input="val => (show = val)"></mymodel> -->
    <mymodel v-model="show"></mymodel>
    <!-- sync: Parameters are passed into the component: xxx Received event from the component: update:xxx The event will automatically modify xxx -->
    <!-- v-model: Parameters are passed into the component: value Events are received from the component: input events will automatically modify value -->
    <h3>Calling with js</h3>
    <button @click="fn2">show Model</button>
  </div>
</template>
<script>
import mymodel from '../../components/mymodel.vue'
export default {
  data () {
    return {
      show:false
    }
  },
  methods: {
    fn1 () {
      this.show = true
    },
    fn2 () {
      // Display the component directly through js method this.$model()
    }
  },
  components:
    mymodel: mymodel
  }
}
</script>

<style></style>