How can I fix this audit warn usage error of vue

Question

>>>app vue code and addtask code:
<template>
  <div class="container">
    <Header title="Task Tracker" />
    <AddTask @add-task="addTask" />
    <Tasks @toggle-reminder="toggleReminder" @delete-task="deleteTask" :tasks="tasks" />
  </div>
  
</template>

<script>
import Header from './components/Header'
import Tasks from './components/Tasks'
import AddTask from './AddTask'
export default {
  name: 'App',
  components: {
    Header,
    Tasks,
    AddTask
  },
  data() {
    return {
      tasks : []
    }
  },
  methods: {
     addTask(task) {
       this.tasks = [...this.tasks, task]
     },
     deleteTask(id) {
       if(confirm('Are you sure?')) {
           this.tasks = this.tasks.filter((task) =>task.id !== id)
       }
       
     },
     toggleReminder(id) {
        this.tasks = this.tasks.map((task) => task.id === id ? {...task,reminder: !task.reminder } : task
        )
     },
  },
  created() {
    this.tasks = [
      {
        id: 1,
        text: 'Doctors Appointement',
        day: 'March 1st at 2:30pm',
        reminder: true,
      },
      {
        id: 2,
        text:'Meeting at School',
        day: 'March 3rd at 1:30pm',
        reminder: true,
      },
      {
        id: 3,
        text: 'Food Shopping',
        day: 'March 3rd at 11:00am',
        reminder: false,
      },
    ]
  }
}
</script>

<style>
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Poppins', sans-serif;
}
.container {
  max-width: 500px;
  margin: 30px auto;
  overflow: auto;
  min-height: 300px;
  border: 10px solid steelblue;
  padding: 30px;
  border-radius: 5px;
}
.btn {
  display: inline-block;
  background: #000;
  color: #fff;
  border: none;
  padding: 10px 20px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  font-size: 15px;
  font-family: inherit;
}
.btn:focus {
  outline: none;
}
.btn:active {
  transform: scale(0.98);
}
.btn-block {
  display: block;
  width: 100%;
}
</style>

header and tasks code:

<template>
    <header>
        <h1>{{title}}</h1>
        <Button @toggle-add-task="$emit('toggle-add-task')" text="Add Task" color="green" />
    </header>
</template>
<script>
    import Button from './Button'
    export default {
        name:'Header',
        props: {
            title: String,
            showAddTask: Boolean
        },
        components :{
            Button
        },
    }
</script>
<style scoped>
    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }
</style>
<template>
    <div :key="task.id" v-for="task in tasks">
       <Task @toggle-reminder="$emit('toggle-reminder',task.id)" @delete-task="$emit('delete-task', task.id)" :task='task' />
    </div>
</template>

<script>
    import Task from './Task'

    
    export default {
        name: 'Tasks',
        props: {
            tasks: Array
        },
        components: {
            Task,
        },
        emits: ['delete-task','toggle-reminder'],
    }
    
    
</script>

Hello I got a problem with a task adder when I try and create a new task, and I click save task it doesn't work and I get an audit to warn. The new task that I add should save and appear but instead, I get a warning and it doesn't work. Can you help me and tell me where is the problem, I checked the code and did it after a tutorial it should work but instead I just get the warning. This is the warning that I get when I click save task: Audit usage of navigator.userAgent, navigator.appVersion, and navigator. platform Any way to solve this?