Getting an error message to show up in vue

I'm using vue and laravel and I'm trying to limit the amount of characters that a user puts into the product description but when I get to 300 characters my error doesn't show up. I already have a maxlength for my textarea but I would like to let the user know.

Here is my code

    <template>
        <transition name="modal-fade">
            <div>
                <div class="modal-backdrop show"></div>
                <div class="modal" style="display: inline;">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content" style="width:720px;">
                            <div class="modal-header">
                                <h5 class="modal-title">New product</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <table class="table table-sm table-bordered">    
                                            <tr><th>Name</th><td class="p-0"><input type="text" v-model="forms.product.name"></td></tr>
                                            <tr><th>Description</th><td class="p-0"><textarea v-model="forms.product.description" maxlength="300"></textarea></td></tr>
                                        </table>
                                    </div>
                                </div>

                            </div>
                            <div class="modal-footer">
                                <p v-if="forms.product.description >= 300">
                                    Cannot create: The description cannot be more then 300 characters.
                                </p>

                                <button type="button" class="btn btn-secondary">Cancel</button>
                                <button type="button" class="btn btn-success">Save</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </template>

    <script>
        export default {
            props: [],
            data() {
                return {
                    forms: {
                        product: {
                            name: null,
                            description: null,
                        },
                    },
                    roles: [],
                }
            },
            computed: {

            },
            methods: {

            }
        }
    </script>

EDIT

I've decided to try making a computed property, but still having a slight issue.

Here is my updated coded

    <template>
        <transition name="modal-fade">
            <div>
                <div class="modal-backdrop show"></div>
                <div class="modal" style="display: inline;">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content" style="width:720px;">
                            <div class="modal-header">
                                <h5 class="modal-title">New product</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <table class="table table-sm table-bordered">    
                                            <tr><th>Name</th><td class="p-0"><input type="text" v-model="forms.product.name"></td></tr>
                                            <tr><th>Description</th><td class="p-0"><textarea v-model="forms.product.description" maxlength="300"></textarea></td></tr>
                                        </table>
                                    </div>
                                </div>

                            </div>
                            <div class="modal-footer">
                                <p v-if="maxOutput">
                                    Cannot create: The description cannot be more then 300 characters.
                                </p>

                                <button type="button" class="btn btn-secondary">Cancel</button>
                                <button type="button" class="btn btn-success">Save</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </template>

    <script>
        export default {
            props: [],
            data() {
                return {
                    forms: {
                        product: {
                            name: null,
                            description: null,
                        },
                    },
                    roles: [],
                }
            },
            computed: {
                maxOutput()
            {
                if (this.forms.product.description == null) return true;

                if (this.forms.product.description.length >= 300) return true;
                if (this.forms.product.description < 300) return false;
            },
            methods: {

            }
        }
    </script>

but the problem now is that my error message shows up in the beginning and then disappears when I start typing and then appears again when I hit 300.