Props modal changing value

I need help with modals, i tried to get this question sorted yesterday but then it got even worse. So please any help would be appreciated.
I have a parent component and inside of there i have a modal (child component)
In my parent the code as follows:

        <template>
    <div class="all">
      <Button type="primary" @click="modalUp()">Press me</Button>
      <appTest @changed = "modal1 = $event" :modal1='modal1'> </appTest>
      {{modal1}}

    </div>
    </template>
    <script>
    /* eslint-disable */
    import test from '~components/test.vue'


    export default {

      data(){
        return{
         modal1: false
        }
      },
      components: {
        appTest: test
      },
      methods: {
        modalUp() {
          this.modal1 = true
        }
      },
      watch:{
        modal1: function(){
          this.$on('changed', (data)=>{
            this.modal1 =
            console.log(data)
          })

        }
      }

    }

    </script>
    <style lang="css" scoped>


    </style>

then inside of the child component (appTest) i have this

     <template>
     <div id="" >
       <Modal v-model="modal1" title="MODALLLL" @on-ok="ok" @on-cancel="cancel">
         <p>@twitter</p>
         <p>@facebook</p>
         <p>Good</p>
         {{modal1}}
       </Modal>
     </div>
     </template>
     <script>
     /* eslint-disable */
     export default {
       props: ['modal1'],
       data() {
         return {
         }
       },
       methods: {
         ok() {
           this.$Message.info('all good');

         },
         cancel() {
           this.$Message.info('Cancel');
           this.$emit('changed')
         }
       },
       watch:{
         modal1: function(){
           this.$emit('changed', this.modal1)
         }
       }

     }
     </script>
     <style lang="css" scoped>
     </style>

So this code works in one way, the modal shows up correctly but once its gone and when we get back to parent component it gives me this vue warning AVOID MUTATING PROP
I checked the docs and everything but vuejs docs give examples like 2+2 which is not helpful in this case. I watched videos on the internet etc but still dont know how to get it done in a proper way. So please tell me if you see what i need to change so that the code will finally work without [Vue warning]'s about changing changing prop value etc.

P.S: Why does this forum look strange now? like squares and rectangles and in google dev it says something has been blocked by CORS

Are you just trying to show/hide a modal here?

As for the squares and rectangles, that is a problem with the icon font.

i already found a solution
in parent component

 <appTest ref='modal1'> </appTest>

   methods: {
    modalUp() {
      this.$refs.modal1.showModal()
       },

and in child

    showModal(){
  this.modal1 = true
}

While that is perfectly valid thing to do, I would still try to use a data driven approach as in the example I gave).

i just moved modal1 data property to the child instead of a parent, its still there :slight_smile: