VueJS + Nuxtjs Unexpected Token 'export'

So i have this code as my index page and It was working, but a couple minutes later it just stopped.

the error is:

SyntaxError
Unexpected token export

Within the script section, If i remove my import then the error will go away, but I need to import it and use it. It was working with the package being imported, but I have looked this code up and down I have no idea what the heck is going on.

Anyone have any suggestions? Am I dumb and have missed something so simple?

<template>
    <section class='container'>
        <img class='my-4' src="~/assets/images/carousel/1.png" alt="card" />
        <div class='text-center mx-auto my-4'>
            <a href="/send/photo"><button> Send a card </button></a>
            <p class='subtle my-4'> Or </p>
            <a href="/open"><button class='btn-blue'> Open a card </button></a>
        </div>
        <div id="qrcode"></div>
    </section>
</template>
<script>
import qrcode from 'qrcode-generator-es6'; <<<<<<<<< SYNTAX ERROR AROUND HERE
export default{
    data : function(){
        return {};
    },
    methods : {

    },
    mounted : function(){
        const qr = new qrcode(0, 'M');
        qr.addData('https://app.voxicard.com/?v=vx-9FEFCA66-F592-4FF5-97B8-93B2FD78666D');
        qr.make();
        document.getElementById('qrcode').innerHTML = qr.createSvgTag({
            margin : 0, 
            cellColor : function(){ 
                return "#48658B";
            },
        });
    },
};
</script>
<style>
#qrcode {
    width: 200px;
    height: 200px;
    background-color: red;
}

img {
    display: block;
    max-height: 500px;
    text-align: center;
    margin: auto;
}

button {
    font-size: 125%;
}
</style>