Problem with template implementation (VUE) using .NET (MVC)

I'm trying to implement an external template (creating an HTML page), but I can not succeed. This page is a ASP.NET MVC page that contains a Vue app.

I want to move the template section of this component to an external file, but whenever I do this it doesn't work.

The following (below) does work, but it's not easy to maintain or build upon due to loss of text editing features.

Vue.component('my-component', { template: '#my-component' }

This is the current code and it works perfectly:

var foo = Vue.component('foo', {
template:'
<table class="table">
 <template v-for="(foo, ColName, index) in foos">
    <template v-if="index % 3 == 0">
        <tr>
        </tr>
    </template>
    <th></th>
    <td v-if="foo"></td>
    <td v-else> -- </td>
 </template>
</table>',
data: function () { 
  return {
    foos: null,
    NumColuns: 3 
  }
}, 
mounted() { 
 axios
  .get('/api/account/foo/')
  .then(response => {
    this.foos = response.data                
   })
  .catch(error => {
    console.log(error1)
      this.errored = true
  })
  .finally(() => this.loading = false)
}
});
var foo = new Vue({ 
  el: '#foo-vue' 
});

from Problem with template implementation (VUE) using .NET (MVC)