login.vue – which is the login page

<template>
  <v-container id="login-page">
    <v-row>
      <v-col>
        <input id="username" v-model="username" data-cy="username" required />
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup>
const username = ref()
</script>

<style lang="scss" scoped></style>

login.cy.js – my test file for the login page

describe('Login form', () => {
  beforeEach(() => {
    cy.visit('/login')
  })

  it('Correct username and password results to successful login', () => {
    cy.get('#username').type('admin')
  })
})

With my test script, the v-model does not update and does not write anything on the input when the video is watched. When I removed the v-model attribute on login.vue it will work just fine.

What would be the appropriate cypress methods to make it work. Eventually, I will use that username to submit to an backend API. I just made optimized it with a username field since that is the particular main problem.