JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <div>tag.tag_id1: <input type="text" v-model="tag.tag_id1"></div>
  <div>tag.tag_id2: <input type="text" v-model="tag.tag_id2"></div>
  <p>
    <router-link tag="button" :to="{ name: 'searchData', params: { tag_id1: tag.tag_id1, tag_id2: tag.tag_id2 } }">
      Go to Foo
    </router-link>
  </p>
  <!-- route outlet -->
  <!-- component matched by the route will render here -->
  <router-view></router-view>
</div>

JavaScript

const Foo = {
  data: function() {
    return {
      error: {},
    }
  },
  template: `
  	<div>
    	<h1>Foo</h1>
      parameters
    	<div>tag_id1: {{$route.params.tag_id1}}</div>
      <div>tag_id2: {{$route.params.tag_id2}}</div>
    </div>`
}



const router = new VueRouter({
  routes: [{
    path: '/foo/:tag_id1/:tag_id2',
    component: Foo,
    name: 'searchData',
    meta: {
      mode: 'search'
    }
  }]
})

const app = new Vue({
  router,
  data: {
    tag: {
    	tag_id1: "param1",
      tag_id2: "param2"
    }
  }
}).$mount('#app')