vue js замена блока при успешной отправки

Question

как сделать замену формы на сообщение при successtrue = true

<template>
    <div class="message-success" v-if="successtrue">
        <svg class="success"><use xlink:href="#success"></use></svg>
        <p>Ваша идея отправлена на модерацию! Спасибо, что помогаете сделать наш проект лучше!</p>
    </div>
    <div class="add-offer-form" v-else>
        <form action="" method="post" v-on:submit="offerForm()" class="offer_form">
            <div class="flex-item">
                <label for="">Тема предложения <span v-text="(maxtitle - title.length)"></span></label>
                <input type="text" :maxlength="maxtitle" v-model="title" id="title" name="title" value="">
            </div>
            <div class="comm-item">
                <span v-text="(max - messageo.length)"></span>
                <textarea name="messageo" :maxlength="max" v-model="messageo" id="messageo" cols="30" rows="10"></textarea>
            </div>
            <button type="submit" class="btn-blue s-center">Добавить идею</button>
        </form>

    </div>
</template>

<script>
    import axios from 'axios'
    Vue.use(axios)

    export default {
        el: '#add_offer',
        data: function(){
            return {
                successtrue: false,
                max: 1000,
                maxtitle: 255,
                title: '',
                messageo: ''
            }
        },
        computed:{
            formData(){
                return {
                    title:this.title,
                    messageo:this.messageo
                }
            }
        },
        methods: {
            offerForm() {
                event.preventDefault();
                axios.post('/offers/create', this.formData)
                    .then(function (resp) {
                        this.successtrue = true;
                    })
                    .catch(function (resp) {
                        console.log(resp);
                        alert("Could not create your company");
                        this.successtrue = false;
                    });
            }
        }
    }

</script>

Answer 1

<template>
    <div class="message-success" v-if="successtrue">
        <svg class="success"><use xlink:href="#success"></use></svg>
        <p>Ваша идея отправлена на модерацию! Спасибо, что помогаете сделать наш проект лучше!</p>
    </div>
    <div class="add-offer-form" v-else>
        <form action="" method="post" v-on:submit="offerForm(successtrue)" class="offer_form">
            <div class="flex-item">
                <label for="">Тема предложения <span v-text="(maxtitle - form.title.length)"></span></label>
                <input type="text" :maxlength="maxtitle" v-model="form.title" id="title" name="title" value="">
            </div>
            <div class="comm-item">
                <span v-text="(max - form.messageo.length)"></span>
                <textarea name="messageo" :maxlength="max" v-model="form.messageo" id="messageo" cols="30" rows="10"></textarea>
            </div>
            <button type="submit" class="btn-blue s-center">Добавить идею</button>
        </form>

    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        el: '#add_offer',
        data: function(){
            return {
                successtrue: false,
                max: 1000,
                maxtitle: 255,
                form: {
                    title: '',
                    messageo: ''
                }
            }
        },
        methods: {
            offerForm() {
                event.preventDefault();
                axios.post('/offers/create', this.form)
                    .then((response) => {
                        this.successtrue = true;
                        console.log('strict:', this);
                    })
                    .catch(function (resp) {
                        console.log(resp);
                        alert("Could not create your company");
                        this.successtrue = false;
                    });
            }
        }
    }

</script>