Props being parsed undefined? - vue.js

Question

Have this very simple vue component where I am trying to accept a search string as a prop
Vue.component('search-person', {
props: ['searchStr'],
created(){
console.log(this)
},
template: `<div class="container">
<form class="search-person-form">
<input type="text" class="search-person-input" placeholder="Search person" v-model="searchStr">
<div v-if="!searchStr.length">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32" class="search-person-icon">
<title>Search</title>
<path d="M32 31.060l-12.233-12.24c1.777-1.992 2.863-4.634 2.863-7.53 0-6.259-5.074-11.333-11.333-11.333s-11.333 5.074-11.333 11.333c0 6.259 5.074 11.333 11.333 11.333 2.896 0 5.538-1.086 7.541-2.873l-0.011 0.010 12.233 12.24zM1.293 11.333c0-5.523 4.477-10 10-10s10 4.477 10 10c0 5.509-4.454 9.977-9.958 10h-0.002c-0 0-0 0-0 0-5.531 0-10.017-4.472-10.040-9.998v-0.002z"/>
</svg>
</div>
<div v-else >
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32" class="search-person-icon pointer">
<title>cross</title>
<path d="M26 6.96l-0.96-0.96-9.040 9.040-9.040-9.040-0.96 0.96 9.040 9.040-9.040 9.040 0.96 0.96 9.040-9.040 9.040 9.040 0.96-0.96-9.040-9.040 9.040-9.040z"/>
</svg>
</div>
</form>
</div>`
})
I am then trying to use the component and parse a search string that is part of the data as a prop
<search-person :searchStr="personSearchStr"/>
personSearchStr is a part of the data object of the component that is nesting the search-person component but in my search-person component the searchStr prop is undefined

Answer 1

Following up on my comment, I created an example scenario with a Search Input component and it's Parent container.
The initial value of the search input (child) comes from a prop set in the parent. The search input watches the prop, so when the parent value is changed (via an input in the parent in my example), the child updates it's local copy. This happens as the user types (no form submission in parent).
When the search input (child) value is changed and the child form is submitted, an event is emitted to send the child value to update the parent.
Parent.vue
<template>
<div class="parent">
<h4>Parent Component</h4>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="prop-value">Enter new prop value</label>
<input type="text" class="form-control" id="prop-value" v-model="parentSearch">
</div>
<hr>
</div>
</div>
<search-input :searchFromParent="parentSearch" #update-search-event="updateSearch" />
</div>
</template>
<script>
import SearchInput from './SearchInput.vue'
export default {
components: {
SearchInput
},
data() {
return {
parentSearch: 'Search value from parent prop'
}
},
methods: {
updateSearch(searchFromChild) {
this.parentSearch = searchFromChild;
}
}
}
</script>
SearchInput.vue
<template>
<div class="search-input">
<h5>Search Input Component (child)</h5>
<div class="row">
<div class="col-md-6">
<form #submit.prevent="submitForm">
<div class="form-group">
<input type="text" class="form-control" id="search-input" v-model="localSearch">
</div>
<button type="submit" class="btn btn-secondary">Submit search value to parent</button>
</form>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
searchFromParent: {
type: String,
required: true
}
},
data() {
return {
localSearch: this.searchFromParent
}
},
watch: {
searchFromParent(newValue) {
this.localSearch = newValue;
}
},
methods: {
submitForm() {
this.$emit('update-search-event', this.localSearch)
}
}
}
</script>