How to fix an undefined error while using Vue.js?

I am currently creating a sign-in page where the customer can sign in using their username and password.

I have two files, sign-in.html and sign-in.js. I believe that the html file is working well and there is no problems with it.

import { sessionStore } from './session-store.js';
/* global Vue, axios */
const app = Vue.createApp({
    data() {
        return {
            // Initialize customer object
            customer: {
                username: '',
                password: ''
            }
        };
    },
,
    methods: {
        signIn() {
            axios.post('/api/customers/' + this.customer.username, {
                password: this.customer.password
            })
            .then(() => {
                sessionStore.commit('signIn', this.customer);
                alert('Sign in successful!');
                window.location = 'view-products.html';
            })
            .catch(error => {
                console.error(error);
                alert('Invalid username or password. Please try again.');
            });
        }
    }
});
app.use(sessionStore);
app.component('navmenu', navigationMenu);
app.mount("main");

Here is the part of the html file that is failing

<input type="text" id="username" v-model="customer.username" required><br /><br />

<label>Password:</label>
<input type="password" id="password" v-model="customer.password" required><br /><br />

I know the html works well as when I remove the customer.username and customer.password to just username and password it appears, but when i have the customer. in front of it, it no longer shows and I get a blank page. I also get an error which says customer is not defined.

This makes me think that the problem is the data customer in the js file but everything else I have tried has not worked.

Is my code correct or could the problem be from another file in my program.

When I added some debugging to my code to see the problem it just wouldn’t run that file, it wouldn’t give me an error either it was just simply providing a blank page without even using the navigation bar which would have no effect on the customer. things.

This is what I see in the console log when I open the sign-in.html page

[Vue warn]: Failed to resolve component: navmenu
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <App> vue.global.js:1516:15
[Vue warn]: Property "customer" was accessed during render but is not defined on instance. 
  at <App> vue.global.js:1516:15
[Vue warn]: Unhandled error during execution of render function 
  at <App> vue.global.js:1516:15
Uncaught TypeError: customer is undefined

I understand that the problem is the customer is undefined, I am just confused where it is meant to be defined, is it a problem with a separate file altogether?