I had to implement that for a project of mine a while back and this is what I ended up with:

<template>
	<svg :viewBox="viewbox" :width="width" :height="height" v-html="use" v-on="$listeners"></svg>
</template>

<script>
export default {
    name: 'WSvg',

    props: {
        path: { ... },

        symbol: { ... },

        width: { ... },

        height: { ... },

        size: { ... }
    },

    computed: {
        use () {
            return `<use xlink:href="${this.path}#${this.symbol}"></use>`
        },

        viewbox () {
            if (this.size) return this.size

            return `0 0 ${this.width} ${this.height}`
        }
    }
}
</script>

Didn't needed the webpack rule if useing the xlink:href, but also don't know if that gives less flexibility or is a bad practice

PS: It's an SVG sprite

How to Dynamically Inline SVG Files in Vue Components