title: Using Razor inside VueJs Component
body: <p>To avoid repeat re-writing the same code multiple times,I'm using VueJs component feature to make a component that includes the Select dropdown list.
  The code goes like this</p>
  
  <pre><code> Vue.component('select-component', {
          template: `
              &lt;label&gt;elType&lt;/label&gt;
              &lt;div class="col-md-colwidth"&gt;
              &lt;select&gt;
                  &lt;option value=""&gt;&lt;/option&gt;
                  @foreach (elType s in ViewBag.elTypes)
                  {
                      &lt;option value="@s[elType+"ID"]"&gt;@s["Designation"+elType]&lt;/option&gt;
                  }
              &lt;/select&gt;
              &lt;input type="hidden" v-model="elTarget"&gt;
              &lt;/div&gt;
              `,
          props: {
              elType: {
                  type: String,
                  default: 'User'
              },
              elTarget: {
                  type: String,
                  default: 'user'
              },
              colwidth: {
                  type: int,
                  default: '3'},
  
  
          }
      })
  </code></pre>
  
  <p>As you can see, I'm requiring some data list I brought from the ViewBag
  but all i get is that the Razor is always ignoring that it is inside a Vue Component and giving "The type or namespace name 'elType' could not be found ".</p>
  
  <p>P.S: 
  1) the input Hidden is used in the original code to manipulate the bs jQuery select2 </p>
  
  <p>2)Don't mind the elTarget and elType :p it's actually same thing except I'm lazy to camelCase the word :p </p>
  
  <p>3)I tried to wrap the  inside @{    } but still toggle the same error</p>