Maксим Волков

<template>
  <div>
    {{ dataFromAPI }}

    тут вызов апи по событию, в вашем случае вы его к чему-нибудь привязываете
    <button @click="getAPI">Get API</button>
  </div>
</template>

<script>
// смешивать jQuery c Vue - плохой вариант, лучше используйте axios
import axios from 'axios'

export default {
  data() {
    return {
      // тут у вас реактивное свойство
      dataFromAPI: null,
    }
  },
  mounted() {
    // тут первый вызов апи при загрузке страницы
    this.getAPI()
  },
  methods: {
    getAPI() {
      return axios
          .get('https://api.your.address')
          .then(response => {
            if (response.data) {
              // когда апи возвращает данные передаем их реактивному свойству
              // и они обновляются без перезагрузки, как вам надо
              this.dataFromAPI = response.data
            }
          })
          // ловим ошибки
          .catch(error => {
            console.log(error);
          })
          .finally(() => {
            // если надо -- дополнительные действия (выключить лоадер, например)
          })
    }
  }
}
</script>

update `products`
set `price` = (`base_price` * ?)
where `currency` = 'EUR';

// В контроллере картинки не трогаем
public function destroy($id)
{
    Pechnik::destroy($id);
    // return ..
}

// Pechnik.php
protected static function booted()
{
    // При удалении удаляем связаные картинки
    static::deleted(function (Pechnik $pechnik) {
        // Обновлено, т.к. mass delete не вызывает событие для модели Image
        // $pechnik->images()->delete();
        // Подход тоже не оптимальный, лишние запросы к БД. Есть что улучшать.
        foreach ($pechnik->images as $image) {
            $image->delete();
        }
    });
}

// Image.php
protected static function booted()
{
    // Удаление картинки из БД - удаляем файл
    static::deleted(function (Image $image) {
        // Удаляем файл
    });
}