JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="interfaces">
  <select v-model="currentInterfaceKey">
    <option v-for="(value, key) in interfaceData.interfaces">
      {{ key }}
    </option>
  </select>
  
  <pre>
    {{ currentInterfaceKey }}
  </pre>
  
  <input
    v-for="(interface, key) in interfaceData.interfaces"
    type="text"
    v-model="interface.config[0].address"
    v-show="key === currentInterfaceKey"
   >
   
   <ul>
     <li v-for="address in allAddresses">
       {{ address }}
     </li>
   </ul>
</div>

CSS

html, body, #editor {
  margin: 0;
  height: 100%;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #333;
}

textarea, #editor div {
  display: inline-block;
  width: 49%;
  height: 100%;
  vertical-align: top;
  box-sizing: border-box;
  padding: 0 20px;
}

textarea {
  border: none;
  border-right: 1px solid #ccc;
  resize: none;
  outline: none;
  background-color: #f6f6f6;
  font-size: 14px;
  font-family: 'Monaco', courier, monospace;
  padding: 20px;
}

code {
  color: #f66;
}

JavaScript

new Vue({
  el: '#interfaces',
  data: {
  	currentInterfaceKey: 'eth1',
  	interfaceData: {
      "version": 1,
      "interfaces": {
        "lo": {
          "type": "loopback",
          "config": [
            {
              "family": "inet",
              "method": "loopback"
            }
          ]
        },
        "eth1": {
          "type": "ethernet",
          "description": "Eth1",
          "config": [
            {
              "family": "inet",
              "method": "static",
              "address": "192.168.20.13/24",
              "gateway": "192.168.20.12",
              "dns": [
                "8.8.8.8",
                "8.8.4.4"
              ]
            }
          ]
        },
        "eth2": {
          "type": "ethernet",
          "description": "Eth2",
          "config": [
            {
              "family": "inet",
              "method": "static",
              "address": "192.168.20.23/24",
              "gateway": "192.168.20.12",
              "dns": [
                "8.8.8.8",
                "8.8.4.4"
              ]
            }
          ]
        }
      }
    }
  },
  computed: {
    allAddresses () {
    	const { interfaces } = this.interfaceData
      return _.map(interfaces, (interface, key) => {
        const [config] = interface.config
        return config.address ? `${key}: "${config.address}"` : `${key}: has no address`
      })
    }
  }
})