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>Query</h1>
  <p>
    <router-link :to="{name: 'query', query: {foo: 1, bar: 2}}">foo: 1, bar: 2</router-link>
    <router-link :to="{name: 'query', query: {foo: 2, bar: 1}}">foo: 2, bar: 1</router-link>
    <router-link :to="{name: 'query'}">default</router-link>
    <router-link :to="{name: 'query', query: {foo: 3}}">foo</router-link>
    <router-link :to="{name: 'query', query: {bar: 3}}">bar</router-link>
  </p>
  <router-view></router-view>


</div>

<script type="text/x-template" id="query">
  <div>
      <p>Foo: {{foo}}</p>
      <p>Bar: {{bar}}</p>
      <router-link :to="{name: $route.name, query: {foo: 4, bar}}">self link with foo: 4</router-link>
    </div>
  </script>

JavaScript

const Query = {
  template: '#query',
  props: {
    foo: {
      default: 'James'
    },
    bar: {
      default: 'Bond'
    },

  }
};

const routes = [{
  name: 'query',
  path: '/query',
  component: Query,
  props: (r) => r.query
}, ]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router
}).$mount('#app')