In companion to @dominik-serafin's answer:

In case you are passing an object, you can easily clone it using spread operator(ES6 Syntax):

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

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

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

But the most important is to remember to use opt. 2 in case you are passing a computed value, or more than that an asynchronous value. Otherwise the local value will not update.

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/

I believe you are doing it right because it is what's stated in the docs.

Define a local data property that uses the prop’s initial value as its initial value

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

Second or third time I run into that problem coming back to an old vue project.

Not sure why it is so complicated in vue, but it can we done via watch:

export default {

  props: ["username"],

  data () {
    return {
      usernameForLabel: "",
    }
  },

  watch: {
    username: {
      immediate: true,
      handler (newVal, oldVal) {
        this.usernameForLabel = newVal;
      }
    },
  },

Just as another approach, I did it through watchers in the child component.

This way is useful, specially when you're passing an asynchronous value, and in your child component you want to bind the passed value to v-model.

Also, to make it reactive, I emit the local value to the parent in another watcher.

Example:

  data() {
    return {
      properties: {},
    };
  },
  props: {
    initial-properties: {
      type: Object,
      default: {},
    },
  },
  watch: {
    initial-properties: function(newVal) {
      this.properties = {...newVal};
    },
    properties: function(newVal) {
      this.$emit('propertiesUpdated', newVal);
    },
  },

This way I have more control and also less unexpected behaviour. For example, when props that passed by the parent is asynchronous, it may not be available at the time of created or mounted lifecycle. So you can use computed property as @Igor-Parra mentioned, or watch the prop and then emit it.

Following up on Cindy's comment on another answer:

Be carful. The spread operator only shallow clones, so for objects that contain objects or arrays you will still copy pointers instead of getting a new copy.

Indeed this is the case. Changes within objects inside arrays will still propagate to your components even when a spread operator is employed.

Here was my solution (using Composition API):

setup() {
    properties = ref([])

    onMounted(() => {
      properties.value = props.initialProperties.map((obj) => ({ ...obj }));
    })
}

This worked to set the values and prevent them from getting changed, even if the data was changed in the parent component.