如何通过vue-router拥有同一个Vue JS组件的多个实例？

Question

我有一个Vue组件，该组件在页面上被实例化了多次，每个实例具有不同的数据。我希望这些组件的路由彼此独立起作用，在其中一个实例中单击一个按钮将仅移动到该实例的下一个视图。但是，事实并非如此，单击按钮会更改所有组件实例中的视图。我可以使用某种配置来实现此目的吗？

此init函数在页面上被多次调用，具有不同的ID和不同的视频对象。

export function init(id, video, hotElementId) {
  const element = `#${hotElementId}`

  new Vue({
    el: element,
    store,
    router,
    data: () => {
      return {
        id: id
      }
    },
    template: '<MonetizationGate/>',
    components: { MonetizationGate },
    beforeMount: function () {
      // set the video object in the store
      store.commit({
        type: 'setVideoObject',
        video: video,
        id: id
      })
    },
    render: h => h(MonetizationGate)
  })
}

我的路由设置：

const routes = [
  {
    path: '/',
    component: Gate,
    children: [
      {
        path: '/',
        component: Subscribe
      },
      {
        path: '/sign_in',
        component: SignIn
      }
    ]
  }
]

const router = new VueRouter({
  routes: routes
})