Dynamic prop binding from parent to child - vue.js

Question

So I'm having a headache since yesterday on this. I'd like to have some kind of two way binding of data. I want for my array data(): exploredFields be able to update the values of the children components. But the update is called from the child.
Here is my parent component.
<div>
<button #click="resetMinefield(rows, mineCount)">RESET</button>
</div>
<div class="minefield">
<ul class="column" v-for="col in columns" :key="col">
<li class="row" v-for="row in rows" :key="row">
<Field
:field="mineFields[(row + (col - 1) * rows) - 1].toString()"
:id="(row + (col - 1) * rows) - 1"
:e="exploredFields[(row + (col - 1) * rows) - 1]" // This doesn't update the child !!!
#update="exploreField"
/>
</li>
</ul>
</div>
...
<script>
import Field from "#/components/Field";
export default {
name: "Minesweeper",
components: {
Field,
},
created() {
this.resetMinefield(this.rows, this.mineCount);
},
data() {
return {
rows: 7,
columns: 7,
mineCount: 5,
mineFields: [],
exploredFields: [],
}
},
methods: {
exploreField(index) {
this.exploredFields[index] = true;
},
resetMinefield(fieldSize, mineCount) {
// Updates this.mineFields
// Passes data properly to the child
}
},
}
</script>
And here is a child component. On #click it updates self data: explored and parents data: exploredFields. But the dynamic binding for props: e does not work.
<template>
<div :class="classObject" #click="changeState">
{{ field }}
</div>
</template>
<script>
export default {
name: "Field",
data() {
return {
explored: false,
}
},
props: {
id: {
type: Number,
default: -1,
},
field: {
type: String,
default: 'X',
},
e: {
type: Boolean,
default: false,
}
},
methods: {
changeState() {
this.$emit("update", this.id);
this.explored = true;
}
},
computed: {
classObject: function() {
// Stuff here
}
},
}
</script>
I also tried to do dynamic binding for data :explored instead of props :e, but no effect there too. It seams that it doesn't want to update because I'm calling the update from the child. And even I can see the data changing, it is not passed back to child dynamically

Answer 1

Looks like a common Vue change detection caveat.
Vue cannot detect the following changes to an array:
When you directly set an item with the index, e.g. vm.items[indexOfItem] = newValue
This...
this.exploredFields[index] = true
won't be reactive. Try this instead
this.$set(this.exploredFields, index, true)

Answer 2

What you probably need is a watcher inside your child component, on the prop "e"
watch: {
e(newValue){
this.explored = newValue
}
}
Everything else looks fine to me, once you click on the field you are emitting an event and youre listening to that in the parent.