How to bind whole component in Vue.js?

If you want to switch between components, then check out VueJS dynamic components: https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components

You can use the component element and the :is prop to send down what component to render.

I have a working demo here: https://codepen.io/bergur/pen/bPEJdB

Imagine the following simple Vue component

Vue.component('menuList', {
  data() {
    return {
      list: ['Menu item A', 'Menu item B']
    }
  },
  template: `
   <ul>
    <li v-for="item in list">{{ item}}</li>
   </ul>
  `
})

This is a simple component rendering a unordered list of menu items. Lets create another similiar component that renders ordered list of products. Note that just to make them a little different, the menuList that has ul and the productList has ol

Vue.component('productList', {
  data() {
    return {
      list: ['Product item A', 'Product item B']
    }
  },
  template: `
   <ol>
    <li v-for="item in list">{{ item}}</li>
   </ol>
  `
})

Now we can create a main VueJS that renders these components depending on which button I press. You can have what ever trigger/action you want to change the component.

new Vue({
  name: 'main',
  el: '#main',  
  data() {
    return {
      header: 'Component switching',
      selectedComponent: 'menuList'
    }
  },
  methods: {
    setComponent(name) {
      this.selectedComponent = name
    }
  },
  template: `<div>
    <button @click="setComponent('menuList')">Menu List</button>
    <button @click="setComponent('productList')">Products</button>
    <component :is="selectedComponent" />
  </div>`
})

So here the magic begins.

We create a app with some data properties. The header property is just a string value, and selectedComponent tells us which component is beeing rendered.

In our template we use the <component :is="selectedComponent /> so initially the menuList component is the active one.

We create a method called setComponent that takes in a string value and sets that as a new value for selectedComponent. By pressing a button a new value for selectedComponent is set and the component is rendered. Voila