How to initialize a template dynamically with the result of an ajax call

I want to load the template for a VueJS component dynamically. I’d like to make an AJAX call using jQuery, and whatever the server returns should be the template of the VueJS component. Here’s a simplified version of the code with the AJAX call removed since it’s irrelevant where the data is coming from:

BoardFeed = Vue.extend
    template: '<div>This should be replaced</div>'
    data: ->
            return items: null
    created: ->
        @template = "<div>Template returned from server, what I really want</div>"

In the above example I’m using the created hook which I thought would be suitable for this, but the newer template is never rendered, only the older one.

Is it possible to achieve this?

[multimeric]

I still think that’s the same situation. Have a look at this fiddle: (code is duplicated below):

<div v-component="{{currentView}}"></div>

//Create the 'default' component
Vue.component("default", {
    template: '<div>This should be replaced (and will be in 2 seconds)</div>'
});

//Create the parent ViewModel
var vm = new Vue({
    el: "body",
    data: {
        currentView: "default"
    }
});

//Pretend to load the data from the server
//This would actually be $.get("/url", data, function(){...});
window.setTimeout(function () {

    //Create the new component using the template we received
    Vue.component("BoardFeed", {
        template: '<div>Template returned from server, what I really want</div><br>And directives work too:<div v-repeat="items">{{$value}}</div>',
        data: function () {
            return {
                items: [1, 2, 3]
            };
        }
    });

    //And then change the page to that component
    vm.currentView = "BoardFeed";
}, 2000);

[emahuni]

@TMiguelT Ok go it!, so how do you do it for single file template syntax returned by ajax like so:

<template>
    <h1 class="bg-success">{{name}}</h1>
    <div>this is the template that was loaded through ajax</div>
</template>

<style lang="sass" rel="stylesheet/css">

</style>

<script>
    export default {
        data () {
            return  {
                name:'ajax template'
            }
        }
    }
</script>

how do i make that to work with vue… I think putting a native protected runtime template compiler is something that Vue is missing and i want it to work this way coz of ide support etc. I don’t want to use webpack code splitting and the like… I want to be able to load a template through Ajax and use it in the browser.