How to access data from IonViewWillEnter

Hey everyone,

I’m building an app with Ionic 5 and Vue (yey!) and I’m having some trouble.

I have 2 tabs. In one tab I’m showing a list of items and you have a floating action button to add new items to that list. I’m storing the items in local storage, and what I want is the list to get refreshed when I add a new one, so it shows the existing + the new one.

To do that, I’m fetching the data onMounted but as explained in the docs, Ionic only mounts the component once, and then you should use ionViewWillEnter lifecycle. The problem is that with the current API, custom ion lifecycle hooks need to be passed as methods, but I’m using the Composition API as suggested by the tutorial, and I can’t access refs nor data from the methods when using it.

How are we supposed to do this? I’m using the default tabs structure you get when creating a new ionic project with the --type=vue flag.

Any help would be appreciated :slight_smile:

A example of the code i’m writing:

setup() {
    const router = useRouter();
    const entries = ref<Array<Entry>>([]);

    function goToNewEntry() {
     // The view to add new entries

    async function fetchAllEntries() {
      try {
        entries.value = await fetchEntries();
      } catch (error) {
    // Only called once

    const methods = {

    const data = {

    const icons = {

    return {
     // first I tried adding here the lifecycle method, but it doesn't work
  methods: {
    ionViewWillEnter() {
      console.log(this); // in the Composition API, this points to the object
      // How can I access here the data?

@namirsab This is a good idea for a blog post, thanks for the question!!

you can separate the data out into separate service/store

import { ref } from "vue";
const entries = ref(["one", "two"]);

const dataManager = () => {

  const addEntry = (value: any) => {
  return { entries, addEntry };
export default dataManager;

Now in your component load the “composable” into your setup

<script lang="ts">
import { /*..removed..*/} from "@ionic/vue";
import { defineComponent, ref } from "vue";
import dataManager from "../data";

export default defineComponent({
  name: "Tab1Detail",
  components:{ /*..removed..*/},
  setup() {

    // access the entries
    const { entries, addEntry } = dataManager();

    return {
      // return entries
  methods: {
    ionViewDidEnter() {
      // access the entries here...
      const { entries } = dataManager();
      console.log("ionViewDidEnter", entries.value);
  data() {
    return {};

Thanks for the prompt answer (and I’m looking forward to read your blogpost!)

I’m pretty new to Vue. Is this a normal pattern in Vue 3 with the composition API? If you could recommend me some links or posts to read about it, that’d be amazing!