VueJS неожиданно запускает функцию

Question

Привет, ребята, специально разработчики VueJS, случилось нечто странное.Я объясню это один за другим. Полное видео: https://drive.google.com/file/d/1G2ksQsMQ1LB868dg29f8mm4NR_x5GycF/view?fbclid=IwAR1YmYbo3J6jHrY6PHd8E_lxA47VJSXV6G3132_uF6Or3bXv7MbnQbRvKaU

Я использую datatable, а затем использую этот метод getDefaultPrice () для манипулирования ценой, потому что формат моей цены подобен этому ("65; 75") дляверните первое значение в PHP 65,00

, затем, как только я нажму кнопку добавления в корзину, см. изображение для кодов, которые также выполняет getDefaultPrice ().и я получил сообщение об ошибке «price.split - не функция». Я попытался console.log для функции, и она действительно запускается без вызова в моей add_to_cart ();

<td>
   <p>{{getDefaultPrice(product.price)}}</p>
   </td>
   <td>
   <button
      class="btn main_bg_color add_to_cart_btn" data-toggle="modal" data-target="#productModal"
      @click="add_to_cart(product)"
   >
      <i class="fa fa-shopping-cart"></i> Add to cart
   </button>
</td>

add_to_cart(product) {
   this.modal_data = [];
   this.modal_data.push(product) 
   this.modal_data[0].variation = this.modal_data[0].variation.split(';');
   this.modal_data[0].price = this.modal_data[0].price.split(';');
   this.modal_data[0].drinks_price = this.modal_data[0].drinks_price.split(';');
   this.modal_data[0].drinks = this.modal_data[0].drinks.split(';');
},
getDefaultPrice(price) {
   console.log("test")
   var price_arr = price.split(";");
   var default_price = parseFloat(price_arr[0]);
   return "PHP " + default_price.toFixed(2);
},