electron app.getPath errors saying app as undefined

Can someone help explain how to get the method working app.getPath. I created a brand new quasar project and all i simply want to do is call app.getPath("documents"). I've created a new file and exposed it through the context bridge, however it always prints app is undefined.

utils.js

import { app } from "electron";
export function getDocsFolder() {
     console.log(app.getPath("documents"))
}

electron-preload.js

import { contextBridge } from "electron";

const utils = require("../src/helpers/utils");
contextBridge.exposeInMainWorld("utils", utils);

main.vue

<template>
    <q-btn name="Click Me" @click="showInfo"></q-btn>
</template>

<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "MainLayout",

  setup() {

    const showInfo= () => {
      window.utils.getDocsFolder()
    };

    return {
      showInfo,
    };
  },
});
</script>

I've left the electron-main.js file untouched as it's auto generated.

import { app, BrowserWindow, nativeTheme } from "electron";
import path from "path";
import os from "os";

// needed in case process is undefined under Linux
const platform = process.platform || os.platform();

try {
  if (platform === "win32" && nativeTheme.shouldUseDarkColors === true) {
    require("fs").unlinkSync(
      path.join(app.getPath("userData"), "DevTools Extensions")
    );
  }
} catch (_) {}

let mainWindow;

function createWindow() {
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    icon: path.resolve(__dirname, "icons/icon.png"), // tray icon
    width: 1000,
    height: 600,
    useContentSize: true,
    webPreferences: {
      contextIsolation: true,
      // More info: /quasar-cli/developing-electron-apps/electron-preload-script
      preload: path.resolve(__dirname, process.env.QUASAR_ELECTRON_PRELOAD),
    },
  });

  mainWindow.loadURL(process.env.APP_URL);

  if (process.env.DEBUGGING) {
    // if on DEV or Production with debug enabled
    mainWindow.webContents.openDevTools();
  } else {
    // we're on production; no access to devtools pls
    mainWindow.webContents.on("devtools-opened", () => {
      mainWindow.webContents.closeDevTools();
    });
  }

  mainWindow.on("closed", () => {
    mainWindow = null;
  });
}

app.whenReady().then(createWindow);

app.on("window-all-closed", () => {
  if (platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  if (mainWindow === null) {
    createWindow();
  }
});