serverPrefetch doesn't work as expected

Version

2.6.10

Steps to reproduce

Suppose we have a component:

export default {
    data(){
        return { foo: null}
    }
    async serverPrefetch(){
        this.foo = 'serverPrefetch'
    },
    created(){
        this.foo = 'created'
    },
}

foo is initially null, then created() updates it to created and this reflects in the html interpolitatiion, but when serverPrefetch() updates this.foo it is not reflected on the rendered html, despite being called afterwards.

What is expected?

serverPrefetch() should reflect rendered and updated data variables when rendered on SSR

What is actually happening?

serverPrefetch() doesn’t update the rendered view with new data after being called

[Akryum]

To conclude: your steps 2 and 4 in your diagram are not technically possible.

[yyx990803]

@DominusVilicus the code you originally posted is working as expected (per test case). By design, a component’s serverPrefetch should only affect data of its own (or child components via passed props). The only case that it “doesn’t work” is that when a component’s serverPrefetch is mutating state that doesn’t belong to itself.