Update data in Root from Component in Vue JS

I have a Vue component and I want to update a data source in the Root. I am already doing this with props but I am having trouble adding a second source called titleActive to it, the value of titleActive does not update on the root.

Component JS

<template>
  <div>
    <label v-for="topic in topics" class="radio-inline radio-thumbnail">
      <input type="radio" @click="selectedValue(topic)" name="topics_radio" :id="topic.id" :value="topic.name" :checked="value && topic.id == value.id">
      <span class="white-color lg-text font-regular text-center text-capitalize">{{ topic.name }}</span>
    </label>
    <ul class="hidden">
      <li>{{ value }}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: ['value','titleActive'],
    data () {
      return {
        topics: [],
        titleActive: false
      }
    },
    methods:{
      selectedValue(topic){
        this.$emit('input', topic);
        this.titleActive = true;
      }
    },
    mounted(){
      axios.get('/vuetopics').then(response => this.topics = response.data);
    }
  }
</script>

Vue Instance

<script>
    var App = new Vue({
            el: '#app',
            data: {
              selectedTopic: null,
              selectedKeywords: null,
              selectedProfiles: null,
              questionTitle: null,
              titleActive: false
            },
            methods: {
              titleBlur: function(){
                // this.selectedTopic = null;
              }

            }
        });
</script>

HTML

<div class="form-group" id="app">
    <topic v-model="selectedTopic"></topic>
</div>