vue.js - カスタム ディレクティブをコンパイルするための Vue ディレクティブ

Question

vue のRender関数を利用するラッパー ディレクティブを作成しました。レンダリング関数内で行うことは次のとおりです。

render: function(createElement) {
    const compiled = Vue.compile(this.$props.template);
    return compiled.render.call(this, createElement);
}

私は次のように使用しています：

<Render v-for="item in itemsToRender" :key="item.id" />

これは、ネイティブの html 要素に対して機能します。

const itemsToRender = ['<p>test</p>', '<h1>HELLO</h1>'];

ただし、次のような独自のカスタム ディレクティブを渡すと

<my-directive></my-directive>

次に、vue は不明なコンポーネントについて文句を言います。これはおそらく、レンダー ディレクティブのコンテキストでカスタム ディレクティブをインポート/要求していないためです。これに対する回避策はありますか？このラッパー ディレクティブがコンパイルを実行する必要がある理由は、vue.Draggable のようなライブラリがリスト要素の並べ替えを「v-for」に依存しているためです。ただし、さまざまなコンポーネントをドラッグ可能にしたいので、v-for にコンパイルするテンプレートだけを渡します。