Así que quiero pasar accesorios a un componente de Vue, pero espero que estos accesorios cambien en el futuro desde dentro de ese componente, por ejemplo, cuando actualizo ese componente de Vue desde adentro usando AJAX. Por lo que son solo para la inicialización del componente.

Mi cars-listelemento de componente Vue donde paso accesorios con propiedades iniciales a single-car:

// cars-list.vue

<script>
    export default {
        data: function() {
            return {
                cars: [
                    {
                        color: 'red',
                        maxSpeed: 200,
                    },
                    {
                        color: 'blue',
                        maxSpeed: 195,
                    },
                ]
            }
        },
    }
</script>

<template>
    <div>
        <template v-for="car in cars">
            <single-car :initial-properties="car"></single-car>
        </template>
    </div>
</template>

La forma en que lo hago en este momento es que dentro de mi single-carcomponente estoy asignando this.initialPropertiesa mi this.data.propertiesen el created()gancho de inicialización. Y funciona y es reactivo.

// single-car.vue

<script>
    export default {
        data: function() {
            return {
                properties: {},
            }
        },
        created: function(){
            this.data.properties = this.initialProperties;
        },
    }
</script>

<template>
    <div>Car is in {{properties.color}} and has a max speed of {{properties.maxSpeed}}</div>
</template>

Pero mi problema con eso es que no sé si esa es la forma correcta de hacerlo. ¿No me causará algunos problemas en el camino? ¿O hay una mejor manera de hacerlo?

Gracias a esto https://github.com/vuejs/vuejs.org/pull/567 ahora sé la respuesta.

Método 1

Pase el apoyo inicial directamente a los datos. Como el ejemplo en documentos actualizados:

props: ['initialCounter'],
data: function () {
    return {
        counter: this.initialCounter
    }
}

Pero tenga en cuenta que si la propiedad pasada es un objeto o matriz que se usa en el estado del componente principal, cualquier modificación a esa propiedad dará como resultado el cambio en el estado de ese componente principal.

Advertencia : este método no se recomienda. Hará que sus componentes sean impredecibles. Si necesita configurar los datos principales de los componentes secundarios, use la administración de estado como Vuex o use "v-model". https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components

Método 2

Si su accesorio inicial es un objeto o matriz y si no desea que los cambios en el estado de los niños se propaguen al estado principal, simplemente use, por ejemplo, Vue.util.extend[1] para hacer una copia de los accesorios en lugar de apuntarlo directamente a los datos de los niños, así:

props: ['initialCounter'],
data: function () {
    return {
        counter: Vue.util.extend({}, this.initialCounter)
    }
}

Método 3

También puede usar el operador de propagación para clonar los accesorios. Más detalles en la respuesta de Igor: https://stackoverflow.com/a/51911118/3143704

Pero tenga en cuenta que los operadores de propagación no son compatibles con los navegadores más antiguos y, para una mejor compatibilidad, deberá transpilar el código, por ejemplo, usando babel.

Notas al pie

[1] Tenga en cuenta que esta es una utilidad interna de Vue y puede cambiar con nuevas versiones. Es posible que desee utilizar otros métodos para copiar ese accesorio, consulte " ¿Cómo clono correctamente un objeto JavaScript? ".

Mi violín donde lo estaba probando: https://jsfiddle.net/sm4kx7p9/3/

En compañía de la respuesta de @ dominik-serafin:

En caso de que esté pasando un objeto, puede clonarlo fácilmente usando el operador de extensión (sintaxis ES6):

 props: {
   record: {
     type: Object,
     required: true
   }
 },

data () { // opt. 1
  return {
    recordLocal: {...this.record}
  }
},

computed: { // opt. 2
  recordLocal () {
    return {...this.record}
  }
},

Pero lo más importante es recordar utilizar opt. 2 en caso de que esté pasando un valor calculado, o más que un valor asincrónico. De lo contrario, el valor local no se actualizará.

Manifestación:

Vue.component('card', { 
  template: '#app2',
  props: {
    test1: null,
    test2: null
  },
  data () { // opt. 1
    return {
      test1AsData: {...this.test1}
    }
  },
  computed: { // opt. 2
    test2AsComputed () {
      return {...this.test2}
    }
  }
})

new Vue({
  el: "#app1",
  data () {
    return {
      test1: {1: 'will not update'},
      test2: {2: 'will update after 1 second'}
    }
  },
  mounted () {
    setTimeout(() => {
      this.test1 = {1: 'updated!'}
      this.test2 = {2: 'updated!'}
    }, 1000)
  }
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<div id="app1">
  <card :test1="test1" :test2="test2"></card>
</div>

<template id="app2">
  <div>
    test1 as data: {{test1AsData}}
    <hr />
    test2 as computed: {{test2AsComputed}}
  </div>
</template>

https://jsfiddle.net/nomikos3/eywraw8t/281070/

Creo que lo está haciendo bien porque es lo que se indica en los documentos.

Defina una propiedad de datos local que use el valor inicial de la propiedad como su valor inicial

https://vuejs.org/guide/components.html#One-Way-Data-Flow