Vue.jsで子componentで、x-templateを使用したhtmlのinputにfocusができなくて困っています。

Question

Vue.jsで子componentで、x-templateを使用したhtmlのinputにfocusができなくて困っています。

componentを使用する前は、htmlに、ref="focusModal" を記載し、javascriptでthis.$refs.focusModal.focus();　を実行するとfocusできていたのですが、

componentでは実行してくれなくて困っています。

デバック実行すると、this.$refsには　focusModal　は見れるのですが。

どなたかご存知であれば教えて下さい。

<div id="app">   
    <button type="button" v-on:click="testAction()">TestAction</button>
        
    <modal-component ref="child1"></modal-component>
</div>

<script type="text/x-template" id="modal-component-id">
    <div>
        <input type="text" ref="focusModal" />
        modal component
    </div>
</script>

const modalComponent = {
    template: "#modal-component-id",

    data() {

    },

    methods: {
        initialModal(id) {
            // 実際はBootstrap5でmodalを開いています。(Bootstrap5のためjqueryは不要)

            // componentでfocusできない
            this.$refs.focusModal.focus();            
        },
    }
};

const app = Vue.createApp({
    data() {
        return {
            id: 0
        }
    },

    components: {
        "modal-component": modalComponent
    },

    methods: {
        testAction() {
            this.id = 1;            
            this.$refs.child1.initialModal(this.id);
        }
    }
});

app.mount("#app");

Answer 1

親側でmodalを開いていたので、親側で開く必要がありました。解決できました。

子のは削除
this.$refs.focusModal.focus();
↓
親に追加
this.$refs["modal"].$refs.focusModal.focus();