v1.5.4 breaks `metaInfo` reactivity

[kchung]

#261 and #262 introduced a breaking feature to the reactivity of metaInfo

For example, this component incrementally updates the title prop:

<script>
export default {
  name: 'app',
  metaInfo() {
    return {
      title: this.title,
    };
  },
  data() {
    return {
      increment: 0,
      title: 'test',
    };
  },
  mounted() {
    setInterval(() => {
      // The title will *not* reactively update with 1.5.4
      this.title = `title-${this.increment++}`;
    }, 500);
  },
}
</script>

In v1.5.4 it doesn't react to any of the changes like v1.5.3 does.

v1.5.3

v1.5.4 (this is a gif)

I created a test project to demonstrate the issue:

• v1.5.4 https://github.com/kchung/vue-meta-issue
• v1.5.3 https://github.com/kchung/vue-meta-issue/tree/1.5.3

You can test by running npm run serve after running npm install

[yikuo123]

I encountered the same problem

[TheAlexLichter]

Thanks for the detailed issue! We will look into it ☺️

[Sociopacific]

same problem

[homerjam]

I've got this issue too. After upgrading a Nuxt project to v2.0 the page titles stopped updating. Downgrading has fixed the issue for the time being npm i -S vue-meta@1.5.3.

Having looked at the recent commit history I think it must be something to do with this. My guess is that by merging the nested options the original objects/prototypes/references are lost. I think this breaks the reactivity because AFAIK reactivity is basically monkey patching set/get methods.

[TheAlexLichter]

Thanks all! Resolved with vue-meta@1.5.5