title: cannot bind path dynamically on vuejs with router-link and v-for
body: <p>I'm having trouble rendering router-link properly with v-for directive.</p>
  
  <p>What I want is that, I want the side menu to have a link that leads the user to the page that url corresponds with the name of the side menu element.<br>
  So, if the element is 'HOME', it should lead to <br>
  <strong>myproject.com/HOME.</strong><br>
  However, somehow it becomes <br>
  <strong>myproject.com/Campaign/Campaign/Campaign/HOME</strong><br>
  when it is rendered.</p>
  
  <p>I literally have no idea what is going on and I'm seeking for help.</p>
  
  <pre><code>&lt;div id="side"&gt;
    &lt;v-navigation-drawer
      fixed
      clipped
      app
      v-model="drawer"
    &gt;
          &lt;v-list dense&gt;
            &lt;template v-for="x in item"&gt;
              &lt;div id="no-child" v-if="!x.children"&gt;
                &lt;router-link :to="{ path: x.title }"&gt;
                  &lt;v-list-tile&gt;
                    &lt;v-list-tile-content&gt;
                      &lt;v-list-tile-title&gt;{{x.title}}&lt;/v-list-tile-title&gt;
                    &lt;/v-list-tile-content&gt;
                  &lt;/v-list-tile&gt;
                &lt;/router-link&gt;
                &lt;v-divider&gt;&lt;/v-divider&gt;
              &lt;/div&gt;
              &lt;div id="with-child" v-else-if="x.children"&gt;
                &lt;v-list-gruop&gt;
                    &lt;v-list-tile&gt;
                      &lt;v-list-tile-content&gt;
                        &lt;v-list-tile-title&gt;{{x.title}}&lt;/v-list-tile-title&gt;
                      &lt;/v-list-tile-content&gt;
                    &lt;/v-list-tile&gt;
                    &lt;v-list-tile&gt;
                      &lt;v-list-tile-content v-for="z in x.children"&gt;
                        &lt;router-link :to="{ path: x.title}"&gt;
                          &lt;v-list-tile-title&gt;{{ z.text }}&lt;/v-list-tile-title&gt;
                        &lt;/router-link&gt;
                      &lt;/v-list-tile-content&gt;
                    &lt;/v-list-tile&gt;
                  &lt;/v-list-gruop&gt;
                &lt;v-divider&gt;&lt;/v-divider&gt;
              &lt;/div&gt;
            &lt;/template&gt;
          &lt;/v-list&gt;
    &lt;/v-navigation-drawer&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>export default {
  data: () =&gt; ({
    drawer: null,
    item: [
      {title: 'HOME'},
      {title: 'Campaign',
        children: [
          {text: 'Start'},
          {text: 'Campaigns'},
          {text: 'Previous'}
        ]
      },
      {title: 'Payment',
        children: [
          {text: 'Pending'},
          {text: 'Completed'}
        ]
      },
      {title: 'Profile'},
      {title: 'Logout'}
    ]
  })}
  </code></pre>
  
  <p>The result of the above is:</p>