<div id="example">

    <father></father>

</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script type="text/javascript">

    Vue.component('child', {

        props: ['myMessage'],

        template: '<div>{{myMessage}}<input v-model="counterMessage"></div>',

        computed: {

            counterMessage: function () {

                return this.myMessage.trim().toLowerCase()

            }

        }

    })

    Vue.component('father', {

        template: '\

            <div>\

                <div>{{parentMsg}}</div><br><child :my-message="parentMsg"></child>\

            </div>',

        data: function () {

            return {

                parentMsg: ' a22 asdasdasd sdasdAS asdAS '

            }

        }

    });

    new Vue({

        el: '#example'

    })

</script>