Vue.js动态组件呈现“无法解析指令”

Question

目前，我已经以其他方式解决了问题，但是我仍然很好奇为什么这行不通。

我正在尝试使用带有2个指令的模板来呈现过渡，但是似乎它试图从其他作用域解析attrs / props，但目前不知道为什么。也许我只是犯了一个愚蠢的错误。

这给了我错误： 绑定和文本均出现“ [Vue警告]：无法解析指令：...”

<script>
    import Step from './Step';

    export default {
        data() {
            return {
                pointer: 0,
                steps: [],
            }
        },

        render(createElement) {
            this.steps = this.$slots.default
                .filter(vnode => vnode.tag && vnode.tag.indexOf(Step.name) > -1);

            this.pointer = this.steps[0].key;

            return createElement('div',
                {},
                [
                    createElement('transition',
                        {},
                        [
                            createElement('template', {
                                directives: [
                                    {name: 'bind', arg: 'key', value: 'pointer'},
                                    {name: 'text', value: 'step'},
                                ],
                            })
                        ]
                    )
                ]);
        },

        computed: {
            step() {
                return _.find(this.steps, step => step.key === this.pointer);
            }
        },

        methods: {
            next() {
                ++this.pointer;
            }
        }
    }
</script>