JSFiddle - React, Tailwind, and code Playground

Iris tests in VueJs

HTML

<link rel="stylesheet" href="https://iris.alkamitech.com/cdn/iris/1.10.0/iris.min.css">
<script src="https://iris.alkamitech.com/cdn/iris/1.10.0/iris.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">

  <p class="border--bottom">multi-line account component</p>
  <multi-line-account
    v-for="account in sharedState.accounts"
    v-bind:key="account.accountNumber"
    v-bind:account="account"
    class="mar-y--lg">
  </multi-line-account>
  
  <p class="border--bottom mar-top--xl pad-top--xl">single-line account component</p>
  <single-line-account
    v-for="account in sharedState.accounts"
    v-bind:key="account.accountNumber"
    v-bind:account="account"
    class="mar-y--lg">
  </single-line-account>
  
  <p class="border--bottom mar-top--xl pad-top--xl">dropdown component that uses both account components</p>
  <account-dropdown></account-dropdown>
  
    <p class="border--bottom mar-top--xl pad-top--xl">the chosen account using same multi-line account component</p>
    <transition name="fade" mode="out-in">
      <template v-if="sharedState.chosenAccount">
        <multi-line-account
          v-bind:account="sharedState.chosenAccount"
          class="mar-y--lg">
        </multi-line-account>
      </template>
      <template v-else>
        <p class="text--center">Please choose an account.</p>
      </template>
    </transition>
  
  <p class="border--bottom mar-top--xl pad-top--xl">add/remove extra account</p>
  <div class="border--all marg--lg pad--lg">
    <button v-on:click="addNewAccount">add account</button>
    <button v-on:click="removeNewAccount">remove account</button>
  </div>

</div>

<script type="text/x-template" id="account_dropdown_template">
<div class="iris-dropdown" data-size="large" id="test-iris-dropdown-account-large" name="dropdown" placeholder="Select an account" ref="dropdown">
	<ul class="iris-options-list">
  	<template v-for="(account, index) in...

CSS

html {
  font-size: 10px;
}

#app {
  margin: 0 auto;
  min-width: 300px;
  width: 50%;
}

.iris-account[data-color='account-color-0'] .iris-account__color-bar {
  background-color: #0798D1; }

.iris-account[data-color='account-color-1'] .iris-account__color-bar {
  background-color: #6F9C2F; }

.iris-account[data-color='account-color-2'] .iris-account__color-bar {
  background-color: #D96D01; }

.iris-account[data-color='account-color-3'] .iris-account__color-bar {
  background-color: #FFC703; }

.iris-account[data-color='account-color-4'] .iris-account__color-bar {
  background-color: #364495; }

.iris-account[data-color='account-color-5'] .iris-account__color-bar {
  background-color: #49AFA6; }

.iris-account[data-color='account-color-6'] .iris-account__color-bar {
  background-color: #A02886; }

.iris-account[data-color='account-color-7'] .iris-account__color-bar {
  background-color: #673300; }
  
  
  .fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

JavaScript

console.clear();

var store = {
	state: {
  	accounts: [
    	{accountColor: 'account-color-0', accountName: 'Steve\'s Checking Account', accountNumber: 123, accountBalance: 1000.51},
      {accountColor: 'account-color-1', accountName: 'Savings Account', accountNumber: 456, accountBalance: 50.00}
    ],
    chosenAccount: null,
    extraAccount: {accountColor: 'account-color-2', accountName: 'Vacation Savings', accountNumber: 789, accountBalance: 2345.00}
  },
  clearChosenAccount: function () {
  	this.state.chosenAccount = null;
  }
};

Vue.component('multi-line-account', {
	template: '#multi_line_account_template',
	props: ['account']
});

Vue.component('single-line-account', {
	template: '#single_line_account_template',
	props: ['account']
});

Vue.component('account-dropdown', {
	template: '#account_dropdown_template',
  props: ['accounts'],
  methods: {
  	dropdownChangeEvent: function (e) {
    	store.state.chosenAccount = store.state.accounts[e.detail.value];
    }
  },
  mounted: function () {
    this.$refs.dropdown.addEventListener('iris.dropdown.change', this.dropdownChangeEvent);
    Alkami.Iris.DropdownComponent.refresh(this.$refs.dropdown);
  }
});

var vm = new Vue({
	el: '#app',
  data: {
  	sharedState: store.state
 	},
  methods: {
  	addNewAccount: function () {
    	this.sharedState.accounts.push(this.sharedState.extraAccount);
      store.clearChosenAccount();
    },
    removeNewAccount: function () {
    	this.sharedState.accounts.pop();
      store.clearChosenAccount();
    }
  }
});