title: Symfony 4, Twig & VueJS - Redirecting to Symfony routes in Vue component
body: <p>I am getting started with Symfony 4 using Twig templating and VueJS for UI components.</p>
  
  <p>I have a very basic component in a <code>.vue</code> file for listing tasks, which currently renders a basic table. </p>
  
  <pre><code>// task-list.vue
  
  &lt;template&gt;
      &lt;div&gt;
          &lt;table class="table table-bordered table-striped"&gt;
              &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;
                      Task
                  &lt;/th&gt;
                  &lt;th&gt;
                      Description
                  &lt;/th&gt;
                  &lt;th&gt;
                      Completed?
                  &lt;/th&gt;
              &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
              &lt;tr v-for="task in parsedTasks"&gt;
                  &lt;td&gt;
                      {{ task.title }}
                  &lt;/td&gt;
                  &lt;td&gt;
                      {{ task.description }}
                  &lt;/td&gt;
                  &lt;td&gt;
                      {{ task.completed ? 'Yes' : 'No' }}
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
        name: 'task-list',
        props: {
          tasks: {required: true}
        },
        computed: {
          parsedTasks() {
            return JSON.parse(this.tasks);
          }
        },
      };
  &lt;/script&gt;
  </code></pre>
  
  <p>This component is registered in the root JS file;</p>
  
  <pre><code>// assets/js/app.js
  
  Vue.component('task-list', TaskList);
  
  new Vue({
    el: '#app-root'
  });
  </code></pre>
  
  <p>This is then used in a Twig template;</p>
  
  <pre><code>// tasks/list.html.twig
  
  ...
  &lt;task-list tasks="{{ tasks | json_encode }}"&gt;&lt;/task-list&gt;
  ...
  </code></pre>
  
  <p>I want to be able to use the <code>path()</code> Twig function so that, when a row in the task list is clicked, the user is redirected to the generated route/path. Is this possible given that the Vue component is not in a Twig file?</p>
  
  <p><em>As a side question, is there a better way to pass a Twig variable to a Vue component than json encoding then parsing the data as above?</em></p>