Vue.js — автоматическое обновление v-for не работает с назначением нового массива

Я следил за этим руководством по vue3: Учебное пособие по Vue.js: от новичка до разработчика интерфейса https://thewikihow.com/video_1GNsWa_EZdw&t=48s

На моей стороне тоже все работает, кроме «обновления» навигационного списка. Он говорит о Eventlistener для обновления страницы, начиная с 04:01:20.

Почему назначение нового массива для this.pages не работает для обновления v-for на моей стороне и что я могу попробовать/отладить?

this.$bus.$on('page-updated', () => {
    this.pages = [...this.$pages.getAllPages()];
});

Соответствующие части сценария:

Navbar.vue

<template>
    ...
    <navbar-link
        v-for = "(page, index) in publishedPages" 
        class = "nav-item" 
        :key = "index"
        :page = "page"
        :index = "index"                  
    ></navbar-link>
    ...
</template>

<script>
import NavbarLink from './NavbarLink.vue';

export default {
    components: {
        NavbarLink
    },
    inject: ['$pages', '$bus'],
    created() {
        this.pages = this.$pages.getAllPages();
        this.$bus.$on('page-updated', () => {
            this.pages = [...this.$pages.getAllPages()];
        });
    },
    data() {
        return {
            theme: 'dark',
            data: []
        }
    },
    computed: {
        publishedPages() {
            return this.pages.filter(p => p.published)
        }
    },
    ..
  } 
}
</script>

PadeEdit.vue

<script setup>
import { useRouter } from 'vue-router';
import { inject } from 'vue';
const router = useRouter();
const pages = inject('$pages');
const bus = inject('$bus');
const {index} = defineProps(['index']);
let page = pages.getSinglePage(index);
function submit() {
    pages.editPage(index, page);
    bus.$emit('page-updated', {
        index,
        page
    });
    ...
}
...
</script>

События.js

const events = new Map();
export default {
    $on(eventName, fn) {
        if (!events.has(eventName)) {
            events.set(eventName, [])
        }
        events.get(eventName).push(fn);
    },
    $emit(eventName, data) {
        if (events.has(eventName)) {
            events.get(eventName).forEach(fn => fn(data));
        }
    }
};

данные.js

const pagesKey = 'pages';

let pagesJson = localStorage.getItem(pagesKey);
let pagesStore = JSON.parse(pagesJson);

function save() {
    localStorage.setItem(pagesKey, JSON.stringify(pagesStore));
}

export default {
    addPage(page){
        pagesStore.push(page);
        save();
    },
    getAllPages() {
        return pagesStore;
    },
    getSinglePage(index) {
        return pagesStore[index];
    },
    editPage(index, page) {
        pagesStore[index] = page;
        save();
    }
}

Я выложил проект на github: https://github.com/qumundo/vue-cli-starter