Почему не срабатывает catch?

Если товар найден в базе, то он выводится. А если товар не найден, то должен выполниться catch. Но catch не выполняется.

<template>
    <spin v-if="loading"></spin>    
    <div v-else-if="!loading && !not_found">
        <h1>Product</h1>
        {{ product.title }}
    </div>
    <div v-else-if="not_found">
        <div class="uk-alert-danger" uk-alert>
        <a class="uk-alert-close" uk-close></a>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>
    </div>
</template>

<script>
    import Spin from "../components/spin.vue";
    import axios from "axios";

    export default {
        data: () => ({
            loading: true,
            product: [],
            not_found: false,
        }),
        components: {
            Spin,
        },
        mounted(){
            console.log(this.not_found);
            this.loadProduct(this.$route.params.id);
        },
        methods:{
            loadProduct(id) {
                axios.get('/api/product/' + id)
                .then(res => {
                    this.product = res.data;
                    setTimeout(() => {
                        this.loading = false;
                    }, 500);
                })
                .catch(res => {
                console.log(res);
                this.not_found = true;
                })
            },
        },
    }
</script>

<style>

</style>

public function show($id){
        $product = Product::find($id);
        
        return $product;
    }