V3GroceryList.vue

<template>
  <div>
    <input type="text" v-model="state.input" placeholder="Add Grocery" />
    <input type="submit" @click="addGrocery()" />
    <ul>
      <li v-for="(item, index) in state.groceries" :key="item">
        {{ item }}
        <button @click="deleteGrocery(index)">X</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { reactive } from "@vue/composition-api";

export default {
  // called after beforeCreate and before create hooks
  setup() {
    const { state, addGrocery, deleteGrocery } = useGroceryList();

    return { state, addGrocery, deleteGrocery };
  }
};

/* Can be imported from an external file as well */
function useGroceryList() {
  // vue composition api exposes the vue core reactive capabilities
  let state = reactive({
    input: "",
    groceries: []
  });

  function addGrocery() {
    state.groceries.push(state.input);
    state.input = "";
  }

  function deleteGrocery(index) {
    state.groceries.splice(index, 1);
  }
  
  return { state, addGrocery, deleteGrocery };
}
</script>