SOURCE

Vue.component('list', {
    props: {
        list: {
            type: Array
        },
        isOpen: {
            type: Boolean
        }
    },
    template: `
        <div>
	        <li class="list" v-for="item in list" :style="{'background': isOpen ? 'red': 'white'}" @mouseenter="open"></li>
        </div>
    `,
    methods: {
        open() {
            this.isOpen = true
        }
    },
    data: {
        isOpen: false
    }
})

new Vue({
    el: '#App',
    data() {
        return {
            list: [1,2,3,4]
        }
    },
    methods: {
        
    }
    
})

<div id="App" class="container-wrap">
    <!-- <div class="box" :style="{'whiteSpace': isOpen ? 'nowrap': 'normal'}" v-for="item in list" @click="open">
        <span>12312333333333333333333333333333333</span>
    </div> -->
    <ul>
        <list :list="list" >
    </ul>
</div>

.box {
    width: 100px;
    border: 1px solid lightblue;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
    word-wrap: break-word;
    margin: 0 auto;
    margin-bottom: 10px;

}

.list {
    width: 200px;
    height: 30px;
    border: 1px solid lightpink;
    list-style: none;
    margin-bottom: -1px;
}