I have a pair of SVG’s causing an error on a new instance within the following stack
PHP / laravel / vue.js / vue 3 / inertia

I have stripped the code down as far as I can, 1 v-if containing 1 SVG object that is referenced with :data will replicate the issue

I did check and learn that a PNG does work in this instance without errors, so it’s likely specific to SVG’s. I tried with a variety of different SVG’s I created and I found online, it seems to be reproducible with any SVG.

If the SVG’s are loaded to the page on initialization there is no issue, it’s only at the time when they are pulled in conditionally that they cause the issue.

console error:
Uncaught TypeError: Cannot use 'in' operator to search for 'animation' in undefined
    at Dn (classifier.js:1:60945)
    at 22551 (classifier.js:1:61228)
    at a (classifier.js:1:3417215)
    at 40961 (classifier.js:1:156466)
    at a (classifier.js:1:3417215)
    at 40806 (classifier.js:1:357929)
    at a (classifier.js:1:3417215)
    at classifier.js:1:3418098
    at classifier.js:1:3418109
    at classifier.js:1:3418113

I would like someone familiar with the binding within a VUE JS project to explain what I’m doing wrong so I can use the binding properly.

I will also preface that aside from a console error- everything is working exactly as expected.

I added some additional logic below, this was 1 of many attempts to use mounting to resolve the issue

<script setup>
    import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
    import { Head } from '@inertiajs/vue3';
    import { ref, onMounted, computed } from 'vue';

    import a from '../../images/a';// file location resources/images/
    import b from '../../images/b';// no custom binding in my vite.config.js

    // optional debugging code, only to refute possible binding issues
    const isMounted = ref(false);
    onMounted(() => {
        isMounted.value = true;
    });
</script>

<template>
    <section v-show="isDisplayed[index]">
        <section v-if="isMounted && isDisplayed[index]">
            <h3>
                headertext
            </h3>
            <object :data="a" />
            <object :data="b" />
        </section>
</template>

I can’t figure out why it’s giving an error here, it seems like I’m binding things correctly, but I hope someone with a deeper understanding of Laravel binding may be able to explain what’s going on so I can understand exactly what is happening here.

Also, OnMounted is not a necessary import to replicate the issue – it’s added for debugging only.