Vuejs pulling database from Sqlite3 over axios; DOM not re-rendering - sqlite

Question

So I am working on a project including Flask, VueJS, Sqlite3 and Axios. On the VueJS side, using a 'GET' request I am getting all the database data and saving it in a JavaScript array. I am trying to iterate through the array and show all the database information in HTML. If I 'refresh' the page the information is displayed. But I would like the information to update 'live' when I add information to the database from a 'POST' axios request to FLASK.
I just put the critical code down below; I tried to make it shorter.
So the axios 'GET' request fetches the entire sqlite3 database; then saves it in the 'database[]' array
The database has three columns; id, FIRST_NAME, LAST_NAME
#app.route('/api/database', methods = ['POST'])
def database_write():
if request.method == 'POST':
conn = sql.connect('test.sqlite3')
conn.execute("INSERT INTO DATABASE (FIRST_NAME,LAST_NAME) \
VALUES (?, ?)", (request.json[0], request.json[1]))
conn.commit()
print("Records created successfully")
conn.close()
return("OK")
#app.route('/api/getdatabase', methods = ['GET'])
def database_get():
if request.method == 'GET':
conn = sql.connect('test.sqlite3')
cursor = conn.cursor()
cursor.execute("SELECT * FROM DATABASE ORDER By id")
rows = cursor.fetchall()
return jsonify(rows)
<template>
<div class="form-group col-6">
<input class="form-control" v-model="form1" type="text">
<input class="form-control" v-model="form2" type="text">
<button class="btn btn-primary" type="submit" #click='writeToDatabase'>Submit</button>
</div>
<table class="table table-hover">
<thead>
<tr>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
<tr v-for="database in database" :key="database[0]">
<td>{{ database[1] }}</td>
<td>{{ database[2] }}</td>
<td>
<div class="btn-group" role="group">
<button type="button" class="btn btn-danger btn-sm" #click="deleteDatabaseValue(database)">Delete</button>
</div>
</td>
</tr>
</tbody>
</table>
</template>
<script>
data () {
return {
form1: "",
form2: "",
database: [],
}
},
writeToDatabase () {
const path = `http://localhost:5000/api/database`
axios.post(path, [this.form1, this.form2])
this.form1 = ""
this.form2 = ""
},
getDatabase() {
const path = 'http://localhost:5000/api/getdatabase'
axios.get(path)
.then((response) => {
// console.log(res.data)
this.database = response.data;
})
.catch((error) => {
// eslint-disable-next-line
console.error(error);
});
},
created() {
this.getDatabase();
},
</script>
I want the v-for to render anytime I add a value to the database or delete a value from the database. It only rerenders when I refresh the page manually and the 'created()' function is called which resets the database.