Vue mixin to Use Laravel Mix manifest in templates

ExampleComponent.vue

<template>
    <figure><img :src="mix('example-asset.jpg')" alt=""></figure>
</template>

<script>
import {mix} from "./mix";

export default {
    name: "ExampleComponent",
    mixins: [mix]
}
</script>

<style scoped>

</style>

mix.js

export const mix = {
    data: () => ({
        manifest: {}
    }),
    async created() {
        const self = this;
        await fetch('/mix-manifest.json')
            .then(response => response.json())
            .then(manifest => {
                self.manifest = manifest;
            });
    },
    methods: {
        mix(assetUrl) {
            if (this.manifest) {
                return this.manifest[assetUrl];
            }
            console.warn('Laravel Mix (Vue): No manifest set.');
            return assetUrl;
        }
    }
};