Vuejs 3 not updating menu in primevue

Question

I am new to Vuejs. I am using Primevue library to build the api using the composition vuejs 3. my problem is that menu is not updating. I want to hide the show button when the element is shown and vice versa. I search all the internet and tried all the solutions I found but in vain. Any help is appreciated, thank you

export default {
  name: "Quote",
  components: {
    loader: Loader,
    "p-breadcrumb": primevue.breadcrumb,
    "p-menu": primevue.menu,
    "p-button": primevue.button,
  },
  setup() {
    const {
      onMounted,
      ref,
      watch,
    } = Vue;

    const data = ref(frontEndData);
    const quoteIsEdit = ref(false);

    const toggle = (event) => {
      menu.value.toggle(event);
    };
    const quote = ref({
      display_item_date: true,
      display_tax: true,
      display_discount: false,
    });
    const menu = ref();
    const items = ref([
      {
        label: data.value.common_lang.options,
        items: [{
          visible: quote.value.display_item_date,
          label: data.value.common_lang.hide_item_date,
          icon: 'pi pi-eye-slash',
          command: (event) => {
            quote.value.display_item_date = !quote.value.display_item_date;
          }
        },
          {
            visible: !quote.value.display_item_date,
            label: data.value.common_lang.unhide_item_date,
            icon: 'pi pi-eye',
            command: () => {
              quote.value.display_item_date = !quote.value.display_item_date;
            }
          }
        ]
    ]);
}

    return {
      data,
      quoteIsEdit,
      menu,
      items,
      toggle
    };
  },
  template:
  `
<div class="container-fluid" v-cloak>
   <div class="text-right">
      <p-menu id="overlay_menu" ref="menu" :model="items" :popup="true"></p-menu>
      <p-button icon="pi pi-cog" class="p-button-rounded p-button-primary m-2" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu"></p-button>
      <p-button :label="data.common_lang.save + ' ' + data.common_lang.quote" class=" m-2" /></p-button>
   </div>
</div>
  `
};

Answer 1

The problem is the items subproperty change is not reactive, so the items.value.items[].visible props are not automatically updated when quote.value.display_item_date changes.

One solution is to make items a computed prop, so that it gets re-evaluated upon changes to the inner refs:

// const items = ref([...])
const items = computed(() => [...])

demo