v-model in the Component

Question

I’m trying to use the v-model inside a component but it doesn’t work.

Code main.js, which will have the information used in the v-model:

import Vue from 'vue'
new Vue({
  el: '#app',
  data: {fields: {name: 'Vittar', age: 24}}
})

Code of my component:

import Vue from 'vue'

Vue.component('dynamic-field', {
  props: ['value'],
  template: '<input type="text" :value="value" v-model="value">',   
})

In case I would pass the property Fields.name in the prop value of my input and use that same prop in the v-model as it appears in the component code:

props: ['value'],
template: '<input type="text" :value="value" v-model="value">',

HTML:

<dynamic-field :value="fields.name"></dynamic-field>

However it does not work, it gives the following error: [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: "value"