Então, eu quero passar adereços para um componente Vue, mas espero que eles mudem no futuro de dentro desse componente, por exemplo, quando eu atualizar esse componente Vue de dentro usando AJAX. Portanto, eles são apenas para inicialização do componente.

cars-listElemento de componente My Vue onde passo adereços com propriedades iniciais para 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>

A maneira que eu fazê-lo agora que dentro do meu single-carcomponente estou atribuindo this.initialPropertiesao meu this.data.propertiesno created()gancho de inicialização. E funciona e é reativo.

// 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>

Mas meu problema com isso é que não sei se essa é uma maneira correta de fazer isso. Isso não vai me causar alguns problemas ao longo da estrada? Ou existe uma maneira melhor de fazer isso?

Graças a https://github.com/vuejs/vuejs.org/pull/567 eu sei a resposta agora.

Método 1

Passe a proposta inicial diretamente para os dados. Como o exemplo em documentos atualizados:

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

Mas tenha em mente que se o prop passado for um objeto ou array usado no estado do componente pai, qualquer modificação nesse prop resultará na mudança no estado do componente pai.

Aviso : este método não é recomendado. Isso tornará seus componentes imprevisíveis. Se você precisar definir dados pai de componentes filhos, use o gerenciamento de estado como Vuex ou use o "modelo v". https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components

Método 2

Se o seu prop inicial é um objeto ou matriz e se você não quer que as mudanças no estado filho se propaguem para o estado pai, então use, por exemplo, Vue.util.extend[1] para fazer uma cópia dos props, em vez de apontá-lo diretamente para os dados dos filhos, como este:

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

Método 3

Você também pode usar o operador de propagação para clonar os adereços. Mais detalhes na resposta do Igor: https://stackoverflow.com/a/51911118/3143704

Mas ter em mente que os operadores de spread não são suportados em navegadores mais antigos e para melhor compatibilidade você precisa transpile o código de exemplo usando babel.

Notas de rodapé

[1] Tenha em mente que este é um utilitário interno do Vue e pode mudar com novas versões. Você pode usar outros métodos para copiar esse objeto , consulte " Como faço para clonar corretamente um objeto JavaScript? ".

Meu violino onde estava testando: https://jsfiddle.net/sm4kx7p9/3/

Acompanhando a resposta de @domik-serafin:

Caso você esteja passando um objeto, você pode cloná-lo facilmente usando o operador spread (sintaxe ES6):

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

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

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

Mas o mais importante é lembrar de usar opt. 2 caso você esteja passando um valor calculado, ou mais do que um valor assíncrono. Caso contrário, o valor local não será atualizado.

Demo:

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/

Eu acredito que você está fazendo certo porque é o que está declarado nos documentos.

Defina uma propriedade de dados local que usa o valor inicial do prop como seu valor inicial

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