VueJs (v2.6.14) Parent binded value is not updating in child component display

Question

I am having trouble understanding how to get my updated parent value that's bound to a child component to update when it is updated.

The parent is getting updated by another child component via an emit like so.

self = this;
   governanceLevelObject.copyright_count = governanceLevelObject['allowed_' + table_prefix +   '_copyright'].length;
   self.$emit('update', governanceLevelObject)

I am capturing and returning the value in the parent via:

    <div class="ui large modal" id="editGovernanceLevelModal">
      <EditGovernanceView
      formType='Update'
      governanceLevel='ecosphere'
      copyrightDefault='Defaults to all'
      :editInformation="editInformation"
      @update="updateEcosphere"
      ></EditGovernanceView>
    </div>

the updateEcosphere function looks like

    updateEcosphere(value){
      console.log("the updated ecosphere is", value);
      this.ecosphere = value;
      console.log("The updated ecosphere is", this.ecosphere)
    },

The console.log works and shows that the ecosphere has been updated with the new information. However, I am not seeing the information reflected within the child component after the modal closes, only after refreshing the page.

I call the child component like so:

   <EcosphereDetailView
      :value="ecosphere"
      router_variable='ecosphere'
      :edit="edit">
   </EcosphereDetailView>

the prop of the child looks like this:

    props: {
      value: {
        type: Object,
        default: () => ({})
      },
      router_variable: {
        type: String,
        default: ""
      },
      edit: {
        type: Boolean,
        default: false
      }
    },

and the value I want to see updated later on in the child component looks like this:

<router-link :to="{ name: 'copyrights', params: { [router_variable + '_id']: value[router_variable+ '_id']}}">value.copyright_count</router-link>

However, this value isn't updating as expected what am I missing here, any help would be greatly appreciated.

Methods I have tried but didn't work:

1. v-modeling the parent

   v-model:value="ecosphere"

2. refresh keying the child component so that the key updates after the ecosphere is updated like so:

    updateEcosphere(value){
      console.log("the updated ecosphere is", value);
      this.ecosphere = value;
      summaryLevelKey++;
      console.log("The updated ecosphere is", this.ecosphere)
    },
     <EcosphereDetailView
       :value="ecosphere"
       router_variable='ecosphere'
       :edit="edit"
       :key="summaryLevelKey">
     </EcosphereDetailView>

3. applying a watch in the child component, with and without the deep: true boolean like so:

    watch: {
      value: {
        handler (newValue oldValue){
          console.log("the new value is", newValue)
          this.value = newValue;
        },
        deep: true
      } 
    },

and 
      value(newValue){
        console.log("the new value is", newValue)
        this.value = newValue;
      }

the console.log here doesn't work and the watch doesn't seem to notice the value change from the binding.

Methods I have tried but didn't work:

1. v-modeling the parent

   v-model:value="ecosphere"

2. refresh keying the child component so that the key updates after the ecosphere is updated like so:

    updateEcosphere(value){
      console.log("the updated ecosphere is", value);
      this.ecosphere = value;
      summaryLevelKey++;
      console.log("The updated ecosphere is", this.ecosphere)
    },
     <EcosphereDetailView
       :value="ecosphere"
       router_variable='ecosphere'
       :edit="edit"
       :key="summaryLevelKey">
     </EcosphereDetailView>

3. applying a watch in the child component, with and without the deep: true boolean like so:

    watch: {
      value: {
        handler (newValue oldValue){
          console.log("the new value is", newValue)
          this.value = newValue;
        },
        deep: true
      } 
    },

and 
      value(newValue){
        console.log("the new value is", newValue)
        this.value = newValue;
      }

I am expecting that as I delete a value from an array and update the count, that I should see it in the my child component see images. Here is the link to a screen recording: 

https://drive.google.com/file/d/1dss2v2Z1Mh5VnTBFUwAaR4dxAGKMuHP-/view?usp=sharing