title: Conflict on Template of Twig and Vue.js
body: <p>I'm doing a program using Slim 2 that uses Twig as my templating engine. so It uses the syntax <code>{{ foo }}</code> in php file. On the other hand, I'm using vue.js, it also uses <code>{{ bar }}</code>. </p>
  
  <p>E.g.</p>
  
  <p>I'm gonna do the two way binding, below is my html code.</p>
  
  <pre><code>&lt;div class="container"&gt;
      Label Value: &lt;label&gt;{{ foo }}&lt;/label&gt;&lt;br&gt;
      Field Value: &lt;input v-model="foo"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and here is my vue js code.</p>
  
  <pre><code>new Vue({
  
      el: '.container',
      data: {
          foo: 'Hello world.'
      }
  });
  </code></pre>
  
  <p>So the Hello world should be in the Label Value.</p>
  
  <p>The output is the image below.</p>
  
  <p><img src="https://i.stack.imgur.com/JUeMX.png" alt="enter image description here"></p>
  
  <p>Which it did not worked, probably the system thought it's a twig variable. So I checked by passing variable in a view.</p>
  
  <pre><code>$app-&gt;get('/', function() use ($app) {
      $app-&gt;render('login.php', [
          'foo' =&gt; 'FROM PHP FILE'
      ]);
  })-&gt;name('login');
  </code></pre>
  
  <p>So I checked, the Label Value: shows the variable that I passed from the PHP file not on the VUE code.</p>
  
  <p>Kind of hard to explain but you get the point. Was wondering how to bypass twig's template and use the <code>{{  }}</code> from vue also.</p>
  
  <p><img src="https://i.stack.imgur.com/7htgU.png" alt="enter image description here"></p>