Data from array not appear? - vue.js

Question

I am trying to fetch data from the database and display it in Home.vue file,
when go to Vue tab in browser (Hotels:Array[0])
file: Home.vue
<template>
<div class="home">
<form>
<div class="inputcontainer">
<input
class="searchc"
type="text"
v-model="searchcity"
placeholder="Search by city..."
/>
</div>
<div class="wrapper">
<div class="card" v-for="htl in searchcityfunc" :key="htl.id">
<img :src="htl.img" alt="Hotel Image" style="width:100%" />
<h1 class="name">{{ htl.name }}</h1>
<p class="price">{{ htl.price }}</p>
<p class="city">{{ htl.city }}</p>
<p class="button"><button>Reed more</button></p>
</div>
</div>
</form>
</div>
</template>
<script>
// # is an alias to /src
import axios from "axios";
var Hotels = [];
export default {
name: "Home",
data() {
return {
searchcity: "",
Hotels,
};
},
methods:{
fetchAllData: function(){
axios.post('http://localhost//web//action.php',{
action:'fetchall',
}).then(function(response){
Hotels = response.data;
console.log(Hotels);
})
},
searchcityfunc() {
return Hotels.filter((srh) =>
this.searchcity != "" ? !srh.city.indexOf(this.searchcity) : ""
);
},
},
created:function(){
this.fetchAllData();
}
,
};
</script>
From my PHP file, I connected to the database and fetched all the records and encoded them
file: action.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
$DBname = "HotelsDB";
$connection = new mysqli($servername,$username,$password,$DBname);
$received_data = json_decode(file_get_contents("php://input"));
$data = array();
if($received_data->action == 'fetchall'){
$sql = "SELECT * FROM Hotels";
$statement = $connection->prepare($sql);
$statement->execute();
$result = $statement->get_result();
while($row = $result->fetch_assoc()){
$data[] = $row;
}
echo json_encode($data);
}
?>
and when trying to search by city nothing appears and Hotels array is (0).