Vue.js Change placeholder in template dynamically - templates

Question

I want change the placeholder in a template dynamically over the input of a textbox but it not work after change the value. Initial it work perfect.
Demo
https://jsfiddle.net/he4gx40g/
Update: Working example thanks #Roy J
https://jsfiddle.net/z3gbk0L2/
Example of the component (without the textbox logic)
<customValueComponent :item="config" :value="'ConfigValue1'" />
Code of the customValue component
customValueComponent: {
props: {
item: {
type: Object,
required: true
},
value: {
type: String,
required: true
}
},
watch: {
value: function (newVal, oldVal) { // watch it
console.log('Prop changed: ', newVal, ' | was: ', oldVal)
this.$options.template = '<div>{{ item.' + this.value + '}}</div>';
}
},
created: function () {
this.$options.template = '<div>{{ item.' + this.value + '}}</div>';
},
template: ''
}
Object
var config =
{
ConfigValue1: "Titanium",
ConfigValue2: "Gold",
ConfigValue3: "Silver",
ConfigValue4: "Bronze",
ConfigValue5: "Copper",
...
};

Answer 1

$options is read-only. This is not how you change values in a template. Vue updates values as they change. Your component definition should be
Vue.component('customvalue-component', {
props: {
item: {
type: Object,
required: true
},
value: {
type: String,
required: true,
}
},
template: '<div>{{value}}</div>'
});
And your binding on the component should be
<customvalue-component :item="config" :value="config[value1]" />