Using Vue.set in object with multiple nested objects : <p>I am trying to use <code>Vue.set()</code> to update a state object in Vue 2. </p>

<p>This is what the object looks like: </p>

<pre><code>state: {
    entries: [
        // entry 1
        fields: {
            someProperties : ''
            // here I would like to add another property named 'googleInfos'
        }
    ], [
        // entry 2
        fields: {
            someProperties : ''
            // here I would like to add another property named 'googleInfos'

        }
    ]
}
</code></pre>

<p>So far, I was updating it with this mutation. I'm mutating each entry separately because they have different content. </p>

<pre><code>ADD_GOOGLE_INFOS (state, {index, infos}) {
    state.entries[index].fields.googleInfos = infos
}
</code></pre>

<p>Now, I'm trying to implement <code>Vue.set()</code> to avoid a <a href="https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats" rel="noreferrer">change detection caveat</a>.</p>

<p>My problem is that I can't find the proper way to add it.</p>

<p>Here's how Vue.set() is supposed to work : </p>

<pre><code>Vue.set(state.object, key, value)
</code></pre>

<p>So I tried this, which doesn't seem to work because <code>state.entries[index]</code> is not an object of first rank :</p>

<pre><code>Vue.set(state.entries[index], 'fields.googleInfos', infos)
</code></pre>

<p>But this doesn't work either :</p>

<pre><code>Vue.set(state.entries, '[index].fields.googleInfos', infos)
</code></pre>

<p>Any one has a clue what I'm doing wrong ?</p>
