Vue.js динамически рендеринг SVG

Question

Я пытаюсь визуализировать SVG-файл, содержащий синтаксис шаблона Vue.js в определенных местах.Файл отображается правильно.При создании экземпляра внутреннего элемента (svg) синтаксис шаблона заменяется, но выдается предупреждение vue:

vue.js:597 [Vue warn]: Property or method "data" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

В SVG есть текст, содержащий синтаксис шаблона {{data}}

Vue.component('svg-show', {
    props: {
        model: {
            required: true
        },
        compiled:null
    },
    render: function (h) {
        return h("div",
            [
                h(this.compiled, {
                    props: {
                        data: this.model
                    }
                })
             ]);
    },
    created() {

    },
    mounted() {
        console.log("mounted");
        console.log(this.model.SVG);
        this.compiled = Vue.compile("<div>" + model.SVG + "</div>");
    }
});

https://jsfiddle.net/dg2hkeby/10/

Я также пытался использовать статическую переменную для свойства данных, но это также не удалось.

Как можно добиться того, что я пытаюсьделать с помощью Vue.js?