Vue mutate prop binded by v-bind with sync modifier

I have an object in my component data. Now, I'm just binding all the properties of the object as a prop to the child component using v-bind.sync directive. I'm updating these props from the child component using the built-in update event but still, I'm getting Avoid mutation props directly error in the console. Here is the minimal example attached.

Parent Component

<template>
  <div>
    <oslo v-bind.sync="data" />
  </div>
</template>

<script>

import Oslo from '@/components/Oslo.vue'

export default {
  components: {
    Oslo,
  },
  name: 'OsloParent',
  data() {
    return {
      data: {
        data: {
          name: 'Oslo name',
          access: 'admin'
        }
      },
    }
  },
}
</script>

Child component

<template>
  <div>
    <input type="text" v-model="name" @keyup="$emit('update:name', name)" />
    <input type="text" v-model="access" @keyup="$emit('update:access', access)" />
  </div>
</template>

<script>
export default {
  props: {
    name: String,
    access: String
  },
  name: 'Oslo',
}
</script>

This is just an example component I've created for the reproduction of the problem. The actual component is supposed to handle so many props with two-way binding and that's the reason I'm binding the data with v-bind directive with sync modifier. Here is the Vue warning from the console (most common).

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "name"

Any suggestions to improve this or silent the Vue warn for this specific case? The above-given components works as desired, Vue throws error though.

from Recent Questions - Stack Overflow https://ift.tt/3ui7Por
https://ift.tt/eA8V8J