Synchronous vuejs2 websql

Question

Really appreciate your support, My Code Start by Triggering Insert Data function Which run a websql Insert query , then after the data is inserted, i need a to retrieve data using Getdata function to get this data and assign it to array_data

<script>
import { defineComponent } from "vue";
import navigationBar from "../components/navigationBar.vue";
export default defineComponent({
  name: "Prod",
  components: {
    navigationBar,
  },
data() {
    return {
      array_data : [],
            }
        },
methods: {
    InsertData() {
       const db = window.openDatabase("data", "1.0", "data", 1 * 1024 * 1024);
       db.transaction((t) => {
         t.executeSql(
           `SQL INSERT Query`,
           [],
           function (t, result) {
                 this.Getdata() ///cant trigger this function
           }
         );
       });
   },
    Getdata() {
      const db = window.openDatabase("data", "1.0", "data", 1 * 1024 * 1024);
      db.transaction((t) => {
        t.executeSql(`SQL SELECT Query`,[],
          (t, result) =>
            (this.array_data = Object.values(result.rows))
        );
      });
    },
  }
});
</script>