HMR with inline-template bindings doesn't seem to work

[ghost]

trafficstars

Sample code:

export const foo = {
    template: "",

    data: () => ({
        visible: false
    }),

    methods: {
        toggle: function() { 
            this.visible = !this.visible; 
        }
    }
};

<foo inline-template>
    <div>
        <button v-on:click="toggle"></button> 
        <div v-bind:class="{visible: visible}">
            bar
        </div>
    </div>
</foo>

import { foo } from "./foo";

if (module.hot) {
    const api = require("vue-hot-reload-api");

    api.install(Vue);

    if(!module.hot.data) {
        api.createRecord("foo-id", foo);
    } else {
        api.reload("foo-id", foo);
    }

    module.hot.accept();
}

const app = new Vue({
    el: "#app",

    components: {
        "foo": foo
    }
});

After a hot reload the HTML bindings seem to be lost. The html is served from a server and bound on the client. Is there a way to make that work with hot reloading? I'm trying out a progressive enhancement approach.

Thank you in advance!