child.html

<template>
    <lightning-card title="@api">{childPropertyName}
    </lightning-card>
    <lightning-card title="@track">{childPropertyValue}
    </lightning-card>
    <lightning-button label="click" onclick={handleChange}></lightning-button>
</template>

child.js

import { LightningElement, api, track } from 'lwc';
export default class ChildComponent extends LightningElement {
    //Reactive property components re-render if it's property values changes
    @track childPropertyValue = "This is a child reactive property VALUE which is private";
    @api childPropertyName = "This is a child reactive property NAME which is public";
    handleChange() {
        this.childPropertyName = "Name has been changed";
        this.childPropertyValue = "Value has been changed";
    }
}

parent.html

<template>
    <c-child-component child-property-name="@api Name has been changed in parent component"
        child-property-value="@track Name has been changed in parent component">
    </c-child-component>
</template>