Tengo un objeto que se ve a continuación, que se almacena en un archivo separado y luego se importa como importación desde "ruta" al componente vue.

 const myTemplate = { a:{ key11: undefined, key12: undefined }, b:{ key21: undefined, key22: undefined } }

Dentro del componente estoy usando este objeto myTemplate para crear una nueva propiedad de datos

 <script> data(){ getfields: myTemplate } </script>

En el script, hago un bucle sobre myTemplate y lo asigno con el accesorio que proviene del componente principal que contiene el valor de key11, key12 ,key21 ,... etc.

El propósito de myTemplate es actuar como formato base/estándar que recopila los datos del accesorio entrante.

Más tarde, getfields se repite mediante v-for en la etiqueta <template> para mostrar el contenido

Envío accesorios {key11: somevalue1, key12: somevalue2} a mi componente secundario coincide con las claves dentro del objeto myTemplate usa los métodos dentro de este componente secundario para actualizar las mismas claves en getfields

resultado final:

 { a:{ key11: somevalue1, key12: somevalue2 }, b:{ key21: undefined, key22: undefined } }

Problema:

En el caso de los objetos, JS copia las referencias y también modifica mi objeto myTemplate .

Quiero tener myTemplate intacto y no puedo modificarlo de ninguna manera si se modifican los getfields de obtención.

Lo que he probado:

1. Deep clone const getfields : JSON.parse(JSON.stringify(myTemplate)) --> no funcionó para mí porque myTemplate es un Object of objects

2. Probé la importación dinámica con la esperanza de que ayudara, pero no funcionó.

   let self= esta importación("ruta") .then((datos) =>{ self.getfields = data.default })