<h1>Двустороннее связывание данных</h1>
    <h3 id="cc"></h3>
    <input id="txt" type="text">
    <button id="add">Добавить</button>
    <hr>
    <div id="m_arr">


    </div>
    <script>
        let m_arr = getId('m_arr')
        let h3 = getId('cc')
        let inp = getId('txt')
        let add = getId('add')

        let cc = { _value: '', _arr: [], arr: [] }

        let newArr = []
        function getId(id) {
            return document.getElementById(id)
        }

        inp.onkeydown = function (e) {
            // console.log(e)
            cc.value = e.target.value
        }
        inp.onkeyup = function (e) {
            // console.log(e)
            cc.value = e.target.value
        }
        // Когда я нажимаю на кнопку "Добавить", я получаю последнее значение input и добавляю его в массив объекта cc
        let inp_value;

        add.onclick = function () {
            // cc.arr = []
            console.log(inp.value)
            cc.arr = [...cc.arr, inp.value]
            console.log(cc.arr)
        }
        Object.defineProperty(cc, 'value', {

            set(newValue) {
                console.log(newValue)
                h3.innerHTML = newValue
                inp_value = newValue
                this._value = newValue
                console.log(inp_value)
            },
            get() {
                return this._value
            },
        })
        console.log(cc)
        Object.defineProperty(cc, 'arr', {
            set(newValue) {
        
                this._arr = newValue
                newArr = this._arr
                // Когда массив изменяется, соответствующие методы выполняются
                console.log(newArr)
                m_arr.innerHTML = ''    // Сначала очищаем элементы на странице, затем перебираем массив и создаем элементы
                change(newArr)
            },
        })
    </script>
``````html
<script>
    new Vue({
        data() {
            return {
                _arr: []
            }
        },
        methods: {
            get() {
                return this._arr
            }
        }
    })
</script>
<script>
    function change(dd) {
        console.log(cc)
        dd.forEach((item, index) => {
            let h3 = document.createElement('h3')
            let span = document.createElement('span')
            span.id = index
            span.innerHTML = "Удалить"
            h3.innerHTML = item
            m_arr.appendChild(h3)
            m_arr.appendChild(span)
            span.onclick = function (e) {
                console.log(this.id)
                dd.splice(this.id, 1)
                cc.arr = dd
            }
        })
    }
</script>