[Vuejs]-Accessing Computed Properties in Vue.js

SOLVED

This is how I solved the issue. I removed the onMounted function and updated the product computed call:

const product = computed(() => {
    const product = store.products.find(product => product.slug === route.params.slug);
    if (product !== undefined) {
        selectedImage.value = product.default_image;
    }
    return product;
});

const selectedImage = ref(null);

I guess it`s a lifecycle issue .. why not you try the following approach :

<template>
<div>
    <!-- Display the image once it's loaded -->
    <img v-if="selectedImage" :src="selectedImage" alt="Product Image" />
    <!-- Display a loading message or placeholder image while loading -->
    <div v-else>Loading...</div>
</div>
</template>

<script>
import { computed, onMounted, ref } from 'vue';
import { useStore } from 'your-store-module'; // Import your store module

export default {
name: 'ProductDetails',
setup(props, context) {
    const store = useStore(); // Use your store module here
    const product = computed(() => {
    return store.state.products.find(product => product.slug === route.params.slug);
    });
    const selectedImage = ref(null);

    function setMainImage(image) {
    selectedImage.value = image.original_url;
    }

    onMounted(async () => {
    // Assuming you fetch the default image from the API
    // You should await the API call if required
    selectedImage.value = product.value.default_image;
    });

    return {
    selectedImage
    };
}
};
</script>

I think you may need to change the product.value in onMounted.

onMounted(async () => {
    await product.value;
    selectedImage.value = product.value.default_image;
});