JSFiddle - React, Tailwind, and code Playground

HTML

<template id="new-drink.html">
            <ons-page id="Tab1">
                <!-- vue instance -->
                <div id="general_info_and_inputs">
                    <!-- Input a new drink -->
                    <ons-card>
                        <input type="text" v-model="drink_counter.drink_name" class="text-input       name_alc" placeholder="Nome alcolico">
                        <input type="text" v-model="drink_counter.mL" class="text-input name_alc" placeholder="Inserisci la quantitĂ  in mL">
                        <input type="text" v-model="drink_counter.drink_alcohol_content" class="text-input name_alc" placeholder="Inserisci il grado alcolico della bevanda">
                        <input type="text" v-model="drink_counter.drink_type" class="text-input name_alc" placeholder="Inserisci il tipo di bevanda">
                        <ons-button style="margin-top: 5%;" @click="pushToMainArray" modifier="large">Vai</ons-button>
                    </ons-card>
                    <!-- Record of all drinks -->
                    <ons-card>
                        <div class="title">
                            Record of drinks
                        </div>
                        <ons-list>
                            <ons-list-item v-for="(item, n) in vue_general.drink_counter">
                                {{ item }}
                            </ons-list-item>
                        </ons-list>
                    </ons-card>
                </div>
            </ons-page>
        </template>

JavaScript

var vue_general = new Vue({
        el: "#general",
        data:{
            general_characteristics:{
                name: "",
                age: "",
                weight:"",
                height:"",
                sex: ""
            },
            standard_alcohol_beverages:{
                name:"Beer",
                alcohol_percentage:"4.2",
                mL: "500"
            },
            drink_counter:{
                date:[""],
                drink_name:[""],
                drink_type: [""],
                mL:[""],
                blood_alcohol_content:[""],
                drink_alcohol_content:[""] 
                //time:[""] --> To implement
            },
            alcohol_level: 0.00
        },
        mounted(){
            if(localStorage.getItem("save_drink_counter")){
                try{
                    this.drink_counter = JSON.parse(localStorage.getItem("save_drink_counter"));
                }catch(e){
                    localStorage.removeItem("save_drink_counter");
                }
            }
        }
    });