Vue Js Push to Ref Array

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/vue@3.2.6/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
      <h3>Vue JS Push to Reactive Array</h3>
        <form @submit.prevent="addItem">
            <input type="text" v-model="newItem" placeholder="Add new item">
            <button type="submit">Add</button>
        </form>
        <ul>
            <li v-for="item in myArray" :key="item">{{ item }}</li>
        </ul>
    </div>
    <script>
        const { ref } = Vue;
        const app = Vue.createApp({
            setup() {
                const myArray = ref(['item 1', 'item 2']);
                const newItem = ref('');

const addItem = () => {
                    if (newItem.value !== '') {
                        myArray.value.push(newItem.value);
                        newItem.value = '';
                    }
                };

return {
                    myArray,
                    newItem,
                    addItem,
                };
            },
        });

app.mount('#app');
    </script>