Programo un pequeño juego de ajedrez con Vue
Estoy tratando de instanciar nuevas piezas con datos.
Básicamente quiero hacer esto (expresado en un idioma diferente):
array.add(new Piece(data))

actualmente estoy haciendo esto:

 const piece = { name: 'piece', template: "<div> ... " data: function () { return { id: null, //data isInit: false, } }, mounted: function () { game.register(this) }, methods: { isInstanciated: function () { return this.isInit }, init: function (id, data) { this.isInit = true this.id = id //initialize, etc } } const app = { name: 'App', components: { piece }, data: function() { return { pieceClassArray: [], pieceObjectArray: [], } }, methods: { register: function (pieceInstance) { this.pieceObjectArray.push(pieceInstance) }, instanciatePiece: function (id, data) { this.pieceClassArray.push(piece) let that = this setTimeout(function () { for (let pieceInstance of that.pieceObjectArray) { if (pieceInstance.isInstanciated() === false) { pieceInstance.init(id, data) break } } }, 50); }, } const game = Vue.createApp(app).mount('#app') // !!!!somewhere in the html !!!! <piece v-for="piece in pieceClassArray"></piece>

Explicación de mi ridículo código:
Estoy comenzando con la función instanciatePiece()
this.pieceClassArray.push(piece) un nuevo componente debido a esta extraña funcionalidad de Vue <piece v-for="piece in pieceClassArray"></piece>
después de eso, piece.mounted llama a game.register(this)
que recopila la nueva referencia de objeto y la almacena en un objeto de pieceObjectArray

-> en una función con retraso en el tiempo, se itera sobre pieceObjectArray para encontrar piezas nuevas y unificadas para inicializar con los datos proporcionados

Está funcionando, pero estoy muy seguro de que estoy usando Vue mal
¿Cómo se debe instanciar un Componente en Vue3?

Cuando intenté instanciar con Vue.createApp (pieza) no pude pasar ningún dato, y cuando creé el segundo, ambos desaparecieron por razones desconocidas