Unable to import electron related files into Vue 3

Question

env:

OS: Windows 10 Pro
Node: v14.15.0
Npm: v7.0.3
Vue: ^3.0.0

I'm using Vue with Electron, and trying to access the app.quit() method in a Vue component. However, anything Electron related seems to give me this error:

Uncaught ReferenceError: __dirname is not defined
    at eval (index.js?bdb9:4)
    at Object../node_modules/electron/index.js (chunk-vendors.js:2062)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at Module.eval (background.ts?43bc:1)
    at eval (background.ts:73)
    at Module../src/background.ts (app.js:1239)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at eval (Draggable.vue?2c68:3)

I've tried using import { app } from 'electron', const { app } = require('electron') and import { app } from '../background.ts'

Here is the full component (@/components/Draggable.vue):

<template>
    <div class="draggable">
        <p @click="close">close</p>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
const { app } = require('../background.ts')

export default defineComponent({
    name: 'Draggable',
    methods: {
        close() {
            console.log('close')
            app.quit()
        }
    }
})
</script>

I'm really confused because posts like this one seem to link them up just fine... (see answers)

I will link the repo here.

Thanks