title: VueJS <script> Template - Prop is not defined in mustache brackets
body: <p>New to VueJS, so any suggestions are welcome.</p>
  
  <p>I'm trying to use Vue to create Bootstrap 4 navs. The following works fine:</p>
  
  <pre><code>var Tabs = new Vue({
      el: '#tabs',
      components: {
          'tab-view': TabView,
      },
      data: {     
          tabs: settings.tabs
      },
  });
  
  &lt;div id='tabs'&gt;
      &lt;ul class='nav nav-tabs'&gt;
          &lt;li class='nav-item' v-for="(tab, index) in tabs" :tab='tab'&gt;
              &lt;a :id='tab' :index='index' :class='{ active: (tab == "app"), "nav-link": true}'&gt;{{tab}}&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, when I try to separate it out into a template using script tags, it doesn't work--I receive a ReferenceError: tab is not defined:</p>
  
  <pre><code>var TabView = {
      template: '#tab-template',
      props: ['tab', 'index'],
  };
  
  &lt;div id='tabs'&gt;
      &lt;ul class='nav nav-tabs'&gt;
          &lt;template v-for="(tab, index) in tabs"&gt;
              &lt;tab-view :tab='tab' :index='index'&gt;&lt;/tab-view&gt;
          &lt;/template&gt;
          &lt;script type='text/x-template' id='tab-template'&gt;
              &lt;li class='nav-item'&gt;
                  &lt;a :id='tab' :index='index' :class='{ active: (tab == "app"), "nav-link": true}'&gt;{{tab}}&lt;/a&gt;
              &lt;/li&gt;
          &lt;/script&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>HOWEVER, if I remove {{tab}}, it works. What am I doing wrong?</p>