<div id="app">
    <div class="user" v-for="user in users">
      <div>{{user.Name}}</div>
      <div class="clients" v-for="client in user.clients">
        <div>
          Name:{{client.Name}} - Tel:{{client.Tel}}
        </div>
      </div>
      <div style="margin-left: 30px">
        <input type="text" v-model="user.NameNewClient"/>
        <input type="text" v-model="user.TelClient">
        <button v-on:click="newClient(user)">Добавить</button>
      </div>
    </div>
    <div style="margin-top: 30px">
      <input type="text" v-model="newUser">
      <button v-on:click="addNewUser()">Новый user</button>
    </div>
  </div>
.user{
  color:green
}
.clients{
  margin-left: 30px;
  color: blue;
}
var app = new Vue({
    el:"#app",
    data:{
      newUser:"",
      users:[
      {Name:"User1", NameNewClient:"",TelClient:"", clients:[
        {Name:"client1", Tel:"001"}
        ]},
      {Name:"User2",NameNewClient:"", TelClient:"", clients:[
        {Name:"client1", Tel:"001"},
        {Name:"client2", Tel:"002"},
        ]}
      ],
    },
    methods:{
      newClient(user){
        user.clients.push({Name:user.NameNewClient, Tel:user.TelClient});
        user.NameNewClient ="";
        user.TelClient = "";
      },
      addNewUser(){
        this.users.push({Name:this.newUser,clients:[]});
        this.newUser = "";
      },
    }
  })

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.6/vue.min.js