diff --git a/src/components/GBtn/__story__/__snapshots__/1-Button.stories.js.snap b/src/components/GBtn/__story__/__snapshots__/1-Button.stories.js.snap
index aa6bda0d..46b4a436 100644
--- a/src/components/GBtn/__story__/__snapshots__/1-Button.stories.js.snap
+++ b/src/components/GBtn/__story__/__snapshots__/1-Button.stories.js.snap
@@ -7,3 +7,77 @@ exports[`test should test1 1`] = `
   XLARGE BUTTON
 </button>
 `;
+
+exports[`test should test1 2`] = `
+<button class="g-btn g-btn__depressed g-size__default waves-effect"
+        style="color: rgb(255, 165, 0); caret-color: #FFA500;"
+>
+  <span class="g-btn__content">
+    DEPRESSED BUTTON
+  </span>
+</button>
+`;
+
+exports[`test should test1 3`] = `
+<button class="g-btn g-btn__fab g-btn__fixed g-btn__bottom g-btn__right g-btn__round g-btn__contained bg-blue g-size__default waves-effect"
+        style="color: rgb(255, 255, 255); caret-color: #ffffff;"
+>
+  <span class="g-btn__content">
+    <i class="material-icons g-icon">
+      android
+    </i>
+  </span>
+</button>
+`;
+
+exports[`test should test1 4`] = `
+<button class="g-btn g-btn__contained g-size__default waves-effect"
+        style="color: rgb(255, 255, 255); caret-color: #ffffff;"
+>
+  <span class="g-btn__content">
+    GRADIENT BUTTON
+  </span>
+</button>
+`;
+
+exports[`test should test1 5`] = `
+<button class="g-btn g-btn__flat g-btn__icon g-btn__round g-size__default waves-effect"
+        style="color: rgb(255, 76, 76); caret-color: #FF4C4C;"
+>
+  <span class="g-btn__content">
+    <i class="material-icons g-icon">
+      star
+    </i>
+  </span>
+</button>
+`;
+
+exports[`test should test1 6`] = `
+<button class="g-btn g-btn__flat g-btn__depressed g-btn__outlined g-size__default waves-effect"
+        style="color: rgb(25, 25, 255); caret-color: #1919FF;"
+>
+  <span class="g-btn__content">
+    OUTLINED BUTTON
+  </span>
+</button>
+`;
+
+exports[`test should test1 7`] = `
+<button class="g-btn g-btn__rounded g-btn__contained bg-brown g-size__default waves-effect"
+        style="color: rgb(255, 255, 255); caret-color: #ffffff;"
+>
+  <span class="g-btn__content">
+    ROUNDED BUTTON
+  </span>
+</button>
+`;
+
+exports[`test should test1 8`] = `
+<button class="g-btn g-btn__flat g-btn__text g-size__default waves-effect"
+        style="color: rgb(50, 153, 50); caret-color: #329932;"
+>
+  <span class="g-btn__content">
+    TEXT BUTTON
+  </span>
+</button>
+`;
diff --git a/src/components/GList/GList.vue b/src/components/GList/GList.vue
index e342885a..0e2195b1 100644
--- a/src/components/GList/GList.vue
+++ b/src/components/GList/GList.vue
@@ -1,111 +1,111 @@
 <template>
-  <div :class="classes"
-       class="g-list"
-       :style="styles"
-       @click="onClick"
-       ref="list"
-  >
-    <template v-if="!multiSection">
-      <slot name="subheader">
-        <div v-if="subheader" class="g-list-header">{{subheader}}</div>
-      </slot>
-      <template v-for="(item, index) in renderList">
-        <slot name="listItem" :item="item" :isSelected="isActiveItem(item)" :on="getListEvents(item)"
-              :onSelect="onSelect">
-          <div v-if="item[itemTitle]"
-               class="g-list-item"
-               :class="{'g-list-item__active': isActiveItem(item), [activeClass]: isActiveItem(item), 'waves-effect': true, 'waves-auto': true}"
-               tabindex="0"
-               v-on="getListEvents(item)"
-          >
-            <slot name="prepend" :item="item" :isSelected="isActiveItem(item)">
-              <div :class="prependClasses" v-if="item.prepend &&  prependType">
-                <g-icon v-if="prependType==='icon'">{{item.prepend}}</g-icon>
-                <g-avatar v-else-if="prependType==='avatar'">
-                  <g-img :src="item.prepend"/>
-                </g-avatar>
-                <g-img v-else-if="prependType==='image'" :src="item.prepend"/>
-              </div>
-            </slot>
-            <div class="g-list-item-content">
-              <div class="g-list-item-text">{{item[itemTitle]}}</div>
-              <div class="g-list-item-text__sub"
-                   v-if="lineNumber > 1">
-                {{item.subtitle|| '&nbsp;'}}
-              </div>
-              <div class="g-list-item-text__sub" v-if="lineNumber === 3">{{item.subtitle2||'&nbsp;'}}</div>
-            </div>
-              <slot name="append" :item="item">
-                <template v-if="item.append">{{item.append}}</template>
-              </slot>
-					</div>
-					<g-divider v-if="(divider && (index < renderList.length -1) )"
-										 :inset="divider === 'inset'"/>
+	<div :class="classes"
+			 :style="styles"
+			 @click="onClick"
+			 class="g-list"
+			 ref="list"
+	>
+		<slot>
+			<template v-if="!multiSection">
+				<slot name="subheader">
+					<div v-if="subheader" class="g-list-header">{{subheader}}</div>
 				</slot>
-			</template>
-		</template>
-
-		<template v-else>
-			<template v-for="(item, index) in items">
-				<template v-if="item.type === 'subheader'">
-					<slot name="subheader">
-						<div class="g-list-header">{{item.subheader}}</div>
+				<template v-for="(item, index) in renderList">
+					<slot :isSelected="isActiveItem(item)" :item="item" :on="getListEvents(item, index)" name="listItem"
+								:onSelect="onSelect">
+						<div
+								:class="{'g-list-item__active': isActiveItem(item), [activeClass]: isActiveItem(item), 'waves-effect': true, 'waves-auto': true}"
+								class="g-list-item"
+								tabindex="0"
+								v-on="getListEvents(item, index)"
+						>
+							<slot name="prepend" :item="item" :isSelected="isActiveItem(item)">
+								<div :class="prependClasses" v-if="item.prepend &&  prependType && itemText">
+									<g-icon v-if="prependType==='icon'">{{item.prepend}}</g-icon>
+									<g-avatar v-else-if="prependType==='avatar'">
+										<g-img :src="item.prepend"/>
+									</g-avatar>
+									<g-img v-else-if="prependType==='image'" :src="item.prepend"/>
+								</div>
+							</slot>
+							<div class="g-list-item-content">
+								<div class="g-list-item-text">{{item[itemText]||item}}</div>
+								<div class="g-list-item-text__sub"
+										 v-if="lineNumber > 1">
+									{{item.subtext|| '&nbsp;'}}
+								</div>
+								<div class="g-list-item-text__sub" v-if="lineNumber === 3">{{item.subtext2||'&nbsp;'}}</div>
+							</div>
+							<slot :isSelected="isActiveItem(item)" :item="item" name="append">
+								<template v-if="item.append && itemText">{{item.append}}</template>
+							</slot>
+						</div>
+						<g-divider v-if="(divider && (index < renderList.length -1) )"
+											 :inset="divider === 'inset'"/>
 					</slot>
 				</template>
+			</template>
+
+			<template v-else>
+				<template v-for="(item, index) in items">
+					<template v-if="item.type === 'subheader'">
+						<slot name="subheader">
+							<div class="g-list-header">{{item.subheader}}</div>
+						</slot>
+					</template>
 
-				<g-divider v-else-if="item.type === 'divider'"></g-divider>
+					<g-divider v-else-if="item.type === 'divider'"></g-divider>
 
-				<slot :item="item" v-else>
-					<div class="g-list-item"
-							 :class="{'g-list-item__active': isActiveItem(item) , activeClass: isActiveItem(item), 'waves-effect': true, 'waves-auto': true}"
-							 tabindex="0"
-							 @click="onSelect(item)"
-							 @keydown.enter="onSelect(item)"
-							 @keydown.down="onArrowDown(item)"
-							 @keydown.up="onArrowUp(item)">
-						<slot name="prepend" :item="item" :isSelected="isActiveItem(item)">
-							<div :class="prependClasses" v-if="item.prepend &&  prependType">
-								<g-icon v-if="prependType==='icon'">{{item.prepend}}</g-icon>
-								<g-avatar v-else-if="prependType==='avatar'">
-									<g-img :src="item.prepend"/>
-								</g-avatar>
-								<g-img v-else-if="prependType==='image'" :src="item.prepend"/>
+					<slot :item="item" v-else>
+						<div class="g-list-item"
+								 :class="{'g-list-item__active': isActiveItem(item) , activeClass: isActiveItem(item), 'waves-effect': true, 'waves-auto': true}"
+								 tabindex="0"
+								 v-on="getListEvents(item, index)">
+							<slot name="prepend" :item="item" :isSelected="isActiveItem(item)">
+								<div :class="prependClasses" v-if="item.prepend &&  prependType">
+									<g-icon v-if="prependType==='icon'">{{item.prepend}}</g-icon>
+									<g-avatar v-else-if="prependType==='avatar'">
+										<g-img :src="item.prepend"/>
+									</g-avatar>
+									<g-img v-else-if="prependType==='image'" :src="item.prepend"/>
+								</div>
+								<div v-else>{{item.prepend}}</div>
+							</slot>
+
+							<div class="g-list-item-content">
+								<div class="g-list-item-text">{{item[itemText]}}</div>
+								<div class="g-list-item-text__sub"
+										 v-if="lineNumber > 1">
+									{{item.subtext || '&nbsp;'}}
+								</div>
+								<div class="g-list-item-text__sub" v-if="lineNumber === 3">{{item.subtext2||'&nbsp;'}}</div>
 							</div>
-							<div v-else>{{item.prepend}}</div>
-						</slot>
+							<slot name="append" :item="item">
+								<template v-if="item.append">{{item.append}}</template>
+							</slot>
 
-            <div class="g-list-item-content">
-              <div class="g-list-item-text">{{item[itemTitle]}}</div>
-              <div class="g-list-item-text__sub"
-                   v-if="lineNumber > 1">
-                {{item.subtitle || '&nbsp;'}}
-              </div>
-              <div class="g-list-item-text__sub" v-if="lineNumber === 3">{{item.subtitle2||'&nbsp;'}}</div>
-            </div>
-            <slot name="append" :item="item">
-              <template v-if="item.append">{{item.append}}</template>
-            </slot>
+						</div>
+					</slot>
+				</template>
+			</template>
+		</slot>
 
-          </div>
-        </slot>
-      </template>
-    </template>
-  </div>
+	</div>
 </template>
 
 <script>
-  import { computed } from '@vue/composition-api';
-  import GDivider from "../GLayout/GDivider";
-  import {makeSelectable} from "../../mixins/groupable";
+  import { computed, provide, ref } from '@vue/composition-api';
+  import GDivider from '../GLayout/GDivider';
+  import { makeSelectable } from '../../mixins/groupable';
   import GIcon from '../GIcon/GIcon';
   import GAvatar from '../GAvatar/GAvatar';
   import GImg from '../GImg/GImg';
   import { keyCodes } from '../../utils/helpers';
-  import _ from 'lodash';
+  import _ from 'lodash'
 
   export default {
     name: 'GList',
-    components: {GImg, GAvatar, GIcon, GDivider},
+    components: { GImg, GAvatar, GIcon, GDivider },
     props: {
       height: String,
       width: String,
@@ -132,46 +132,54 @@
         type: String,
         default: 'avatar',
       },
-      subtitleWrap: Boolean,
+      subtextWrap: Boolean,
       value: [String, Object, Number, Array],
       selectable: Boolean,
       multiple: Boolean,
       mandatory: Boolean,
       allowDuplicates: Boolean,
       itemValue: String,
-      itemTitle: {
+      itemText: {
         type: String,
         default: 'title'
       },
       activeClass: String,
-       inMenu: Boolean,
+      inMenu: Boolean,
+      returnObject: Boolean,
     },
     setup: function (props, context) {
       //G list computed class
-      //Computed subtitle
+      //Computed subtext
       const lineNumber = computed(() => {
-        if (!props.items.find(i => i.subtitle)) return 1;
-        if (props.items.find(i => i.subtitle2)) return 3;
+        if (!props.items) {
+          return
+        }
+        if (!props.items.find(i => i.subtext)) {
+          return 1;
+        }
+        if (props.items.find(i => i.subtext2)) {
+          return 3;
+        }
         return 2;
       })
 
       const classes = computed(() => ({
         'g-list__disabled': props.disabled,
-        'g-list__two-line': (lineNumber.value === 2 && !props.subtitleWrap),
-        'g-list__three-line': (lineNumber.value === 2 && props.subtitleWrap) || lineNumber.value === 3,
+        'g-list__two-line': (lineNumber.value === 2 && !props.subtextWrap),
+        'g-list__three-line': (lineNumber.value === 2 && props.subtextWrap) || lineNumber.value === 3,
         'g-list__rounded': props.rounded,
         'g-list__shaped': props.shaped,
         ['elevation-' + props.elevation]: true,
         'g-list__dense': props.dense,
         'g-list__inMenu': props.inMenu,
         'g-list__nav': props.nav,
-        'g-list__empty': !props.items.length
+        'g-list__empty': !props.items
 
       }));
 
       const styles = computed(() => ({
-        ...props.height && {'height': props.height},
-        ...props.width && {'width': props.width}
+        ...props.height && { 'height': props.height },
+        ...props.width && { 'width': props.width }
       }));
       const prependClasses = computed(() => {
         if (!['icon', 'avatar', 'image'].includes(props.prependType)) {
@@ -181,65 +189,77 @@
       })
 
 
-      const renderList = computed(() => _.map(props.items, (value) => {
-          if (_.isObject(value)) return value
-          else return {[props.itemTitle]: value} // when props.items is an array of primitives
-        }))
+      const isObjectList = computed(() => props.items.some(item => _.isObject(item) === true))
+      const renderList = computed(() => {
+        return isObjectList.value ? props.items.filter(item => item[props.itemText]) : props.items
+      })
+      const isSelected = (item, index) => {
+        return isObjectList.value ? isActiveItem(item) : isActiveItem(index)
+      }
+
+      //Events in list
+
+      //when no props.items provided
+      const itemsInList = ref([])
+      provide('itemsInList', itemsInList)
+
 
-      //Select
       function onClick(event) {
         context.emit('click', event)
       }
 
-      function onArrowDown(item) {
-        let index = renderList.value.findIndex(i => i[props.itemTitle] === item[props.itemTitle] && i.subtitle === item.subtitle && i.prepend === item.prepend)
-        let i = index
-        if (index < (renderList.value.length - 1)) {
-          i += 1
-        } else {
-          i = 0
-        }
-        context.refs.list.getElementsByClassName('g-list-item')[i].focus()
+      function onArrowDown(index) {
+        index < ((renderList.value && renderList.value.length) - 1 || (itemsInList.value && itemsInList.value.length) - 1) ? index += 1 : index = 0
+        context.refs.list.getElementsByClassName('g-list-item')[index].focus()
         context.emit('keydown:down')
       }
-      function onArrowUp(item) {
-        let index = renderList.value.findIndex(i => i[props.itemTitle] === item[props.itemTitle] && i.subtitle === item.subtitle && i.prepend === item.prepend)
-        let i = index
-        index > 0 ? i -= 1 : i = props.items.length -1
-        context.refs.list.getElementsByClassName('g-list-item')[i].focus()
+
+      function onArrowUp(index) {
+        index > 0 ? index -= 1 : index = (renderList.value && renderList.value.length) || (itemsInList.value && itemsInList.value.length) - 1
+        context.refs.list.getElementsByClassName('g-list-item')[index].focus()
         context.emit('keydown:up')
       }
 
       function onSelect(item) {
-        if (!props.selectable) return;
+        if (!props.selectable) {
+          return;
+        }
         toggleItem(item)
         context.emit('click:item')
       }
 
       const { internalValue, toggleItem, isActiveItem } = makeSelectable(props, context);
 
-      const getListEvents = (item) => {
-       let listListeners ={}
-        return listListeners = {
-         click: () => onSelect(item),
-         keydown: (e) => {
-           switch (e.keyCode) {
-             case keyCodes.down:
-               onArrowDown(item)
-               break
-             case keyCodes.up:
-               onArrowUp(item)
-               break
-             case keyCodes.enter:
-               onSelect(item)
-               break
-           }
-         }
+      //handler list items in list
+
+      provide('selectedItems', internalValue)
+      provide('multiple', props.multiple)
+      provide('mandatory', props.mandatory)
+      provide('selectable', props.selectable)
+      provide('allowDuplicates', props.allowDuplicates)
+      const getListEvents = (item, index) => {
+        return {
+          click: () => onSelect(item),
+          keydown: (e) => {
+            switch (e.keyCode) {
+              case keyCodes.down:
+                onArrowDown(index)
+                break
+              case keyCodes.up:
+                onArrowUp(index)
+                break
+              case keyCodes.enter:
+                onSelect(item)
+                break
+            }
+          }
         }
       }
+      provide('getListEvents', getListEvents)
 
 
       return {
+        itemsInList,
         classes,
         styles,
         prependClasses,
@@ -250,8 +270,10 @@
         onArrowUp,
         onSelect,
         internalValue,
+        isSelected,
         isActiveItem,
         getListEvents,
+        isObjectList,
       }
     }
   }
diff --git a/src/components/GList/GListItem.vue b/src/components/GList/GListItem.vue
index 605c91e3..bfc3d0ac 100644
--- a/src/components/GList/GListItem.vue
+++ b/src/components/GList/GListItem.vue
@@ -1,59 +1,77 @@
 <template>
-	<div :class="classes" :style="styles" @click="onSelectItem" @keydown="onKeyDown">
+	<div :class="classes" :style="styles" tabindex="0" v-on="listItemEvents(value)">
 		<slot></slot>
 	</div>
 </template>
 
 <script>
-  import { computed, ref } from '@vue/composition-api';
-	import {getInternalValue} from "../../utils/helpers";
+  import { computed, inject, ref } from '@vue/composition-api';
+  import groupable from '../../mixins/groupable';
 
   export default {
     name: 'GListItem',
     props: {
-			height: String,
-			disabled: Boolean,
-			selectable: Boolean,
+      height: String,
+      disabled: Boolean,
       twoLine: Boolean,
       threeLine: Boolean,
-			isSelected: Boolean,
-		},
-		setup(props, context) {
+      value: [String, Number, Object]
+    },
+    setup(props, context) {
       const classes = computed(() => {
         const defaultClasses = {
           'g-list-item': true,
-					'waves-effect': true
-				};
+          'waves-effect': true
+        };
         return {
           ...defaultClasses,
-					'g-list-item__disabled': props.disabled,
-					'g-list-item__selectable': props.selectable,
+          'g-list-item__disabled': props.disabled,
+          'g-list-item__selectable': props.selectable,
           'g-list-item__two-line': props.twoLine,
           'g-list-item__three-line': props.threeLine,
-					'g-list-item__active': props.isSelected,
-				}
-			});
+          'g-list-item__active': isActiveItem(props.value),
+        }
+      });
       const styles = computed(() => {
-        if(props.height) {
+        if (props.height) {
           return {
             'height': props.height
-					}
-				}
-			});
-      const onSelectItem = () => {
-        context.emit('singleItemClick')
-			}
-			const onKeyDown = (e) => {
-      	context.emit('keydown', e)
-			}
+          }
+        }
+      });
+
+      //handle listItem in List case
+      const itemsInList = inject('itemsInList').value.push(props.value)
+      const selectedItems = inject('selectedItems')
+      const multiple = inject('multiple')
+      const mandatory = inject('mandatory')
+      const allowDuplicates = inject('allowDuplicates')
+      const {isActiveItem} = groupable({ multiple, mandatory, allowDuplicates }, selectedItems)
+      const selectable = inject('selectable')
+      const inListEvents = inject('getListEvents')
+      const internalValue = ref(null)
+      const { toggleItem } = groupable(props, internalValue)
+      const singleItemEvents = () => {
+        return {
+          click: () => {
+            toggleItem(props.value)
+            context.emit('singleItemClick')
+          },
+          keydown: (e) => {
+            context.emit('keydown', e)
+          }
+        }
+      }
+      const listItemEvents = selectable ? inListEvents : singleItemEvents()
 
       return {
+        itemsInList,
         classes,
-				styles,
-				onSelectItem,
-				onKeyDown,
-			}
-		}
+        styles,
+        listItemEvents,
+        selectedItems,
+      }
+    }
   }
 </script>
 
diff --git a/src/components/GList/__story__/GList.stories.js b/src/components/GList/__story__/GList.stories.js
index 08cb556e..e85fb784 100644
--- a/src/components/GList/__story__/GList.stories.js
+++ b/src/components/GList/__story__/GList.stories.js
@@ -1,19 +1,24 @@
 import { boolean, number, text, withKnobs } from '@storybook/addon-knobs';
-import { action } from '@storybook/addon-actions';
 import GList from '../GList';
 import GListItem from '../GListItem';
 import GDivider from '../../GLayout/GDivider.vue';
 import {
-  GListItemIcon,
-  GListItemAvatar,
+  GListHeader,
   GListItemAction,
+  GListItemAvatar,
+  GListItemContent,
+  GListItemIcon,
   GListItemImage,
   GListItemImageBig,
-  GListItemContent,
-  GListItemText,
   GListItemSubText,
-  GListHeader
+  GListItemText
 } from '../GListFunctionalComponent'
+import Vue from 'vue/dist/vue.common.js'
+import GContainer from '../../GLayout/GContainer';
+import GRow from '../../GLayout/GRow';
+import GCol from '../../GLayout/GCol';
+import GIcon from '../../GIcon/GIcon';
+import GBtn from '../../GBtn/GBtn';
 
 export default {
   title: 'GList',
@@ -24,10 +29,12 @@ export const gListPlayGround = () => ({
   data() {
     return {
       items: [
-        { title: 'Jason Oner', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Jason Oner', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Jason Oner', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Jason Oner', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
       ]
     }
   },
@@ -42,14 +49,15 @@ export const gListPlayGround = () => ({
     subheader: { default: text('subheader', 'subheader') },
     divider: { type: [String, Boolean], default: boolean('divider', false) },
     prependType: { default: text('prependType', 'avatar') },
-    subtitleWrap: { default: boolean('subtitleWrap', false) },
+    subtextWrap: { default: boolean('subtextWrap', false) },
     selectable: { default: boolean('selectable', false) },
     multiple: { default: boolean('multiple', false) },
     mandatory: { default: boolean('mandatory', false) },
     allowDuplicates: { default: boolean('allowDuplicates', false) },
     itemValue: { default: text('itemValue', '') },
-    itemTitle: { default: text('itemTitle', 'title') },
+    itemText: { default: text('itemText', 'text') },
     activeClass: { default: text('activeClass', '') },
+    returnObject: { default: boolean('returnObject', false) },
   },
   template:
     `
@@ -64,7 +72,12 @@ export const gListPlayGround = () => ({
         :subheader="subheader"
         :divider="divider"
         :prependType="prependType"
-        :subtitleWrap="subtitleWrap"
+        :subtextWrap="subtextWrap"
+        :itemText="itemText"
+        :selectable="selectable"
+        :multiple="multiple"
+        :mandatory="mandatory"
+        :returnObject="returnObject"
       />
       `,
 })
@@ -73,12 +86,12 @@ export const gListSingleSelectPlayGround = () => ({
   data() {
     return {
       items: [
-        { title: 'Jason Oner', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Jason Oner', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
       ],
-      testValue: null
+      testValue: ''
     }
   },
   props: {
@@ -92,11 +105,12 @@ export const gListSingleSelectPlayGround = () => ({
     subheader: { default: text('subheader', 'subheader') },
     divider: { type: [String, Boolean], default: boolean('divider', false) },
     prependType: { default: text('prependType', 'avatar') },
-    subtitleWrap: { default: boolean('subtitleWrap', false) },
+    subtextWrap: { default: boolean('subtextWrap', false) },
     mandatory: { default: boolean('mandatory', false) },
-    itemValue: { default: text('itemValue', '') },
-    itemTitle: { default: text('itemTitle', 'title') },
+    itemValue: { default: text('itemValue', 'prepend') },
+    itemText: { default: text('itemText', 'text') },
     activeClass: { default: text('activeClass', '') },
+    returnObject: { default: boolean('returnObject', true) },
   },
   template:
     ` 
@@ -113,12 +127,14 @@ export const gListSingleSelectPlayGround = () => ({
         :subheader="subheader"
         :divider="divider"
         :prependType="prependType"
-        :subtitleWrap="subtitleWrap"
+        :subtextWrap="subtextWrap"
         selectable
         :mandatory="mandatory"
         :itemValue="itemValue"
-        :itemTitle="itemTitle"
-        :activeClass="activeClass">
+        :itemText="itemText"
+        :activeClass="activeClass"
+        :returnObject="returnObject"
+        >
       </g-list>
       </div>
       `,
@@ -128,12 +144,12 @@ export const gListMultiSelectPlayGround = () => ({
   data() {
     return {
       items: [
-        { title: 'Jason Oner', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Jason Oner', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
       ],
-      testValue: null
+      testValue: ['Jason Oner']
     }
   },
   props: {
@@ -147,13 +163,14 @@ export const gListMultiSelectPlayGround = () => ({
     subheader: { default: text('subheader', 'subheader') },
     divider: { type: [String, Boolean], default: boolean('divider', false) },
     prependType: { default: text('prependType', 'avatar') },
-    subtitleWrap: { default: boolean('subtitleWrap', false) },
+    subtextWrap: { default: boolean('subtextWrap', false) },
     multiple: { default: boolean('multiple', true) },
     mandatory: { default: boolean('mandatory', false) },
     allowDuplicates: { default: boolean('allowDuplicates', true) },
-    itemValue: { default: text('itemValue', '') },
-    itemTitle: { default: text('itemTitle', 'title') },
+    itemValue: { default: text('itemValue', 'text') },
+    itemText: { default: text('itemText', 'text') },
     activeClass: { default: text('activeClass', '') },
+    returnObject: { default: boolean('returnObject', false) },
   },
   template:
     ` 
@@ -170,13 +187,14 @@ export const gListMultiSelectPlayGround = () => ({
         :subheader="subheader"
         :divider="divider"
         :prependType="prependType"
-        :subtitleWrap="subtitleWrap"
+        :subtextWrap="subtextWrap"
         selectable
         :multiple="multiple"
         :mandatory="mandatory"
         :allowDuplicates="allowDuplicates"
         :itemValue="itemValue"
-        :itemTitle="itemTitle"
+        :itemText="itemText"
+        :returnObject="returnObject"
         :activeClass="activeClass">
       </g-list>
       </div>
@@ -187,10 +205,10 @@ export const gListInset = () => ({
   data() {
     return {
       items: [
-        { title: 'Jason Oner', prepend: 'https://cdn.vuetifyjs.com/images/lists/1.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Jason Oner', prepend: 'https://cdn.vuetifyjs.com/images/lists/1.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
       ]
     }
   },
@@ -209,10 +227,10 @@ export const gListDense = () => ({
   data() {
     return {
       items: [
-        { title: 'Jason Oner', subtitle: 'Jason the ant, ants work together to gather food and care for the young, and their behavior is surprisingly coordinated and methodical for such seemingly simple insects. ', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Jason Oner', subtext: 'Jason the ant, ants work together to gather food and care for the young, and their behavior is surprisingly coordinated and methodical for such seemingly simple insects. ', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
       ]
     }
   },
@@ -224,7 +242,7 @@ export const gListDense = () => ({
         <g-row>Two-line</g-row>
         <g-row><g-list :items="items" :dense="dense" subheader="subheader" divider='inset' /> </g-row>
         <g-row>Two-line with wrapper</g-row>
-         <g-row><g-list :items="items"  :dense="dense" subheader="subheader" divider='inset' subtitleWrap/></g-row>
+         <g-row><g-list :items="items"  :dense="dense" subheader="subheader" divider='inset' subtextWrap/></g-row>
     </g-container>`,
 })
 export const gListShapedInset = () => ({
@@ -232,10 +250,10 @@ export const gListShapedInset = () => ({
   data() {
     return {
       items: [
-        { title: 'Jason Oner', subtitle: 'Jason the ant, ants work together to gather food and care for the young, and their behavior is surprisingly coordinated and methodical for such seemingly simple insects. ', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Jason Oner', subtext: 'Jason the ant, ants work together to gather food and care for the young, and their behavior is surprisingly coordinated and methodical for such seemingly simple insects. ', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
       ]
     }
   },
@@ -255,10 +273,10 @@ export const gListNav = () => ({
   data() {
     return {
       items: [
-        {title: 'Jason Oner', subtitle: "Jason the ant", prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg'},
-        {title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg'},
-        {title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg'},
-        {title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg'},
+        { text: 'Jason Oner', subtext: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
       ]
     }
   },
@@ -277,10 +295,10 @@ export const gListTwoLine = () => ({
   data() {
     return {
       items: [
-        { title: 'Jason Oner', subtitle: 'Jason the ant, ants work together to gather food and care for the young, and their behavior is surprisingly coordinated and methodical for such seemingly simple insects.', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Jason Oner', subtext: 'Jason the ant, ants work together to gather food and care for the young, and their behavior is surprisingly coordinated and methodical for such seemingly simple insects.', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
       ],
 
     }
@@ -296,16 +314,16 @@ export const gListTwoLineWithWrapper = () => ({
   data() {
     return {
       items: [
-        { title: 'Jason Oner', subtitle: 'Jason the ant, ants work together to gather food and care for the young, and their behavior is surprisingly coordinated and methodical for such seemingly simple insects. ', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', subtitle: 'Ranee the cockroach', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Jason Oner', subtext: 'Jason the ant, ants work together to gather food and care for the young, and their behavior is surprisingly coordinated and methodical for such seemingly simple insects. ', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', subtext: 'Ranee the cockroach', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
       ]
     }
   },
   template:
     `
-      <g-list :items="items" rounded dense subheader="subheader" divider='inset' subtitleWrap >
+      <g-list :items="items" rounded dense subheader="subheader" divider='inset' subtextWrap >
       </g-list>
       `,
 })
@@ -314,16 +332,16 @@ export const gListThreeLine = () => ({
   data() {
     return {
       items: [
-        { title: 'Jason Oner', subtitle: 'Jason the ant', subtitle2: 'ants work together to gather food and care for the young, and their behavior is surprisingly coordinated and methodical for such seemingly simple insects. ', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Jason Oner', subtext: 'Jason the ant', subtext2: 'ants work together to gather food and care for the young, and their behavior is surprisingly coordinated and methodical for such seemingly simple insects. ', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
       ]
     }
   },
   template:
     `
-      <g-list :items="items" rounded  subheader="subheader" divider='inset' subtitleWrap >
+      <g-list :items="items" rounded  subheader="subheader" divider='inset' subtextWrap >
       </g-list>
       `,
 })
@@ -332,10 +350,10 @@ export const gListPrependWithSlot = () => ({
   data() {
     return {
       items: [
-        { title: 'Jason Oner', subtitle: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Jason Oner', subtext: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
       ]
     }
   },
@@ -353,10 +371,10 @@ export const gListAppendWithSlot = () => ({
   data() {
     return {
       items: [
-        { title: 'Jason Oner', subtitle: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Jason Oner', subtext: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
       ]
     }
   },
@@ -375,12 +393,12 @@ export const gListNormalPrependAvatar = () => ({
     return {
       items: [
         { subheader: 'User', type: 'subheader' },
-        { title: 'Jason Oner', subtitle: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Jason Oner', subtext: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
         { type: 'divider' },
         { subheader: 'Admin', type: 'subheader' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
         { subheader: 'Admin', type: 'subheader' },
 
       ]
@@ -399,12 +417,12 @@ export const gListNormalPrependIcon = () => ({
     return {
       items: [
         { subheader: 'User', type: 'subheader' },
-        { title: 'Jason Oner', subtitle: 'Jason the ant', prepend: 'mdi-pen' },
-        { title: 'Ranee Carlson', prepend: 'mdi-ninja' },
+        { text: 'Jason Oner', subtext: 'Jason the ant', prepend: 'mdi-pen' },
+        { text: 'Ranee Carlson', prepend: 'mdi-ninja' },
         { type: 'divider' },
         { subheader: 'Admin', type: 'subheader' },
-        { title: 'Cindy Baker', prepend: 'mdi-glasses' },
-        { title: 'Ali Connors', prepend: 'mdi-mail' },
+        { text: 'Cindy Baker', prepend: 'mdi-glasses' },
+        { text: 'Ali Connors', prepend: 'mdi-mail' },
         { subheader: 'Admin', type: 'subheader' },
 
       ]
@@ -422,10 +440,10 @@ export const gListNormalPrependImg = () => ({
   data() {
     return {
       items: [
-        { title: 'Jason Oner', subtitle: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Jason Oner', subtext: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
       ]
     }
   },
@@ -442,12 +460,12 @@ export const gListMultiSection = () => ({
     return {
       items: [
         { subheader: 'User', type: 'subheader' },
-        { title: 'Jason Oner', subtitle: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Jason Oner', subtext: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
         { type: 'divider' },
         { subheader: 'Admin', type: 'subheader' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
         /*{subheader: 'Admin', type: 'subheader'},*/
       ]
     }
@@ -464,10 +482,10 @@ export const gListSingleSectionSelect = () => ({
   data() {
     return {
       items: [
-        { title: 'Jason Oner', subtitle: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Jason Oner', subtext: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
       ],
       testValue: 1
     }
@@ -488,12 +506,12 @@ export const gListMultiSectionSelect = () => ({
     return {
       items: [
         { subheader: 'User', type: 'subheader' },
-        { title: 'Jason Oner', subtitle: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Jason Oner', subtext: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
         { type: 'divider' },
         { subheader: 'Admin', type: 'subheader' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
         /*{subheader: 'Admin', type: 'subheader'},*/
       ],
       testValue: 1,
@@ -514,10 +532,10 @@ export const gListItemSlotRenderArray = () => ({
   data() {
     return {
       items: [
-        { title: 'Jason Oner', subtitle: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Jason Oner', subtext: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
       ],
       testValue: 1
     }
@@ -530,7 +548,7 @@ export const gListItemSlotRenderArray = () => ({
               <template v-slot:listItem="{item, isSelected, onSelect}">
                 <g-list-item :item="item" :isSelected="isSelected" @singleItemClick="onSelect(item)" >
                   <g-list-item-content>
-                      <g-list-item-text >{{item.title}}</g-list-item-text>
+                      <g-list-item-text >{{item.text}}</g-list-item-text>
                   </g-list-item-content>
                 </g-list-item>
               </template>
@@ -544,10 +562,10 @@ export const gListMultiSelect = () => ({
   data() {
     return {
       items: [
-        { title: 'Jason Oner', subtitle: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Jason Oner', subtext: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
       ],
       testValue: null
     }
@@ -572,10 +590,10 @@ export const gListSelectMandatory = () => ({
   data() {
     return {
       items: [
-        { title: 'Jason Oner', subtitle: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Jason Oner', subtext: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
       ],
       testValue: null
     }
@@ -595,10 +613,10 @@ export const gListCustomActiveClass = () => ({
   data() {
     return {
       items: [
-        { title: 'Jason Oner', subtitle: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Jason Oner', subtext: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
       ],
       testValue: null
     }
@@ -620,19 +638,19 @@ export const gListAsMenuContent = () => ({
   data() {
     return {
       list1: [
-        { title: 'Profile', prepend: 'person' },
-        { title: 'Chat', prepend: 'chat' },
-        { title: 'Help', prepend: 'help' },
+        { text: 'Profile', prepend: 'person' },
+        { text: 'Chat', prepend: 'chat' },
+        { text: 'Help', prepend: 'help' },
         { type: 'divider' },
-        { title: 'Lock', prepend: 'lock' },
-        { title: 'Log out', prepend: 'keyboard_tab' },
+        { text: 'Lock', prepend: 'lock' },
+        { text: 'Log out', prepend: 'keyboard_tab' },
       ],
       list2:[
-        { title: ' A new order has been placed!', subtitle: '2 hours ago', prepend: 'add_shopping_cart', color: 'cyan' },
-        { title: '  Completed the task', subtitle: '3 days ago', prepend: 'star', color: 'red' },
-        { title: '  Settings updated', subtitle: '4 days ago', prepend: 'settings', color: 'teal' },
-        { title: ' Settings updated', subtitle: '6 days ago', prepend: 'today', color: 'deep-orange' },
-        { title: '  Generate monthly report', subtitle: '1 week ago', prepend: 'trending_up', color: 'amber' },
+        { text: ' A new order has been placed!', subtext: '2 hours ago', prepend: 'add_shopping_cart', color: 'cyan' },
+        { text: '  Completed the task', subtext: '3 days ago', prepend: 'star', color: 'red' },
+        { text: '  Settings updated', subtext: '4 days ago', prepend: 'settings', color: 'teal' },
+        { text: ' Settings updated', subtext: '6 days ago', prepend: 'today', color: 'deep-orange' },
+        { text: '  Generate monthly report', subtext: '1 week ago', prepend: 'trending_up', color: 'amber' },
       ],
       testValue: null
     }
@@ -674,7 +692,8 @@ export const gListPrimitiveItems = () => ({
   components: { GDivider, GListItem, GList, GListItemIcon, GListItemAvatar, GListItemAction, GListItemImage, GListItemImageBig, GListItemContent, GListItemText, GListItemSubText, GListHeader },
   data() {
     return {
-      items: ['Jason Oner', 'Ranee Carlson', 'Cindy Baker', 'Ali Connors']
+      items: ['Jason Oner', 'Jason Oner', 'Jason Oner', 'Ranee Carlson', 'Cindy Baker', 'Ali Connors'],
+      selectedValue: null
     }
   },
   props: {
@@ -688,17 +707,20 @@ export const gListPrimitiveItems = () => ({
     subheader: { default: text('subheader', 'subheader') },
     divider: { type: [String, Boolean], default: boolean('divider', false) },
     prependType: { default: text('prependType', 'avatar') },
-    subtitleWrap: { default: boolean('subtitleWrap', false) },
-    selectable: { default: boolean('selectable', false) },
-    multiple: { default: boolean('multiple', false) },
+    subtextWrap: { default: boolean('subtextWrap', false) },
+    selectable: { default: boolean('selectable', true) },
+    multiple: { default: boolean('multiple', true) },
     mandatory: { default: boolean('mandatory', false) },
     allowDuplicates: { default: boolean('allowDuplicates', false) },
     itemValue: { default: text('itemValue', '') },
-    itemTitle: { default: text('itemTitle', 'title') },
+    itemText: { default: text('itemText', '') },
     activeClass: { default: text('activeClass', '') },
+
   },
   template:
       `
+<div>
+{{selectedValue}}
       <g-list :items="items"
         :disabled="disabled"
         :rounded="rounded"
@@ -710,17 +732,50 @@ export const gListPrimitiveItems = () => ({
         :subheader="subheader"
         :divider="divider"
         :prependType="prependType"
-        :subtitleWrap="subtitleWrap"
+        :subtextWrap="subtextWrap"
+        :selectable="selectable"
+        :multiple="multiple"
+        :mandatory="mandatory"
+        allowDuplicates
+        v-model="selectedValue"
       />
+</div>
+
       `,
 })
 
-import Vue from 'vue/dist/vue.common.js'
-import GContainer from '../../GLayout/GContainer';
-import GRow from '../../GLayout/GRow';
-import GCol from '../../GLayout/GCol';
-import GIcon from '../../GIcon/GIcon';
-import GBtn from '../../GBtn/GBtn';
+export const gListFreeRender = () => ({
+  components: { GList, GIcon, GListItemIcon, GContainer, GDivider, GRow, GBtn, GListItem, GListItemContent },
+  data() {
+    return {
+      testValue: null,
+      items:[
+        {text: 'item1', value: 1},
+        {text: 'item2', value: 2},
+        {text: 'item3', value: 3},
+      ]
+    }
+  },
+
+  template:
+    `
+      <div data-app>
+      {{testValue}}
+        <template>
+        <g-list multiple selectable v-model="testValue">
+        <g-list-item :value="items[0]">
+        <g-list-item-content>Item 1</g-list-item-content>
+        </g-list-item>
+        <g-list-item >
+        <g-list-item-content>Item 2</g-list-item-content>
+        </g-list-item>
+        <g-list-item selectable :value="items[2]">
+        <g-list-item-content>Item 3</g-list-item-content>
+        </g-list-item>
+        </g-list>
+        </template>
+      </div>`,
+})
 
 
 describe('GList', function () {
diff --git a/src/mixins/groupable.js b/src/mixins/groupable.js
index 67515711..39fbb235 100644
--- a/src/mixins/groupable.js
+++ b/src/mixins/groupable.js
@@ -1,67 +1,58 @@
 import _ from 'lodash'
-import { computed, ref, watch } from '@vue/composition-api';
+import {ref, watch} from '@vue/composition-api'
 
 function groupable(props, vModel) {
   //mandatory: requires at least 1 to be active at all times, unless value is null/undefined (at init)
   //multiple: multiple items can be active at a time
   //allowDuplicate: choose one item multiple times
-  const { returnObject = true, items, mandatory, multiple, allowDuplicates, maxSelection } = props
+  if (typeof props.returnObject === 'undefined') props.returnObject = true
+
   const toggleItem = (item) => {
-    if (multiple) {
-      if (returnObject) {
-        updateMultiple(item);
-      } else {
-        updateMultiple(items.indexOf(item))
-      }
+    if (props.multiple) {
+      if (props.returnObject && props.itemText) updateMultiple(item)
+      else props.itemValue ? updateMultiple(item[props.itemValue]) : updateMultiple(props.items.indexOf(item))
     } else {
-      if (returnObject) {
-        updateSingle(item);
-      } else {
-        updateSingle(items.indexOf(item))
-      }
+      if (props.returnObject && props.itemText) updateSingle(item)
+      else props.itemValue ? updateSingle(item[props.itemValue]) : updateSingle(props.items.indexOf(item))
     }
-  };
+  }
 
   const updateSingle = (item) => {
-    const isSame = _.isEqual(vModel.value, item);
-    if (isSame && mandatory) {
-      return;
-    }
-    vModel.value = isSame ? null : item;
-  };
+    const isSame = vModel.value === item
+
+    if (isSame && props.mandatory) return
+
+    vModel.value = isSame ? null : item
+  }
 
   const updateMultiple = (item) => {
-    const clonedValue = _.clone(vModel.value);
-    const itemIndex = clonedValue.findIndex((i) => i === item);
-    //item exists + mandatory
-    if (itemIndex > -1 && mandatory && clonedValue.length - 1 < 1) {
-      return;
-    }
-    if (itemIndex > -1 && !allowDuplicates) {
-      clonedValue.splice(itemIndex, 1);
+    // use isNil because !0 will return true
+    if (_.isNil(vModel.value)) vModel.value = []
+
+    const itemIndex = vModel.value.findIndex(e => e === item)
+    if (itemIndex > -1) {
+      if (props.mandatory && vModel.value.length < 2) return
+
+      if (!props.allowDuplicates) vModel.value.splice(itemIndex, 1)
     } else {
-      if (maxSelection) {
-        if (clonedValue.length < maxSelection) {
-          clonedValue.push(item);
-        } else {
-          return;
-        }
-      } else {
-        clonedValue.push(item);
-      }
+      if (!props.maxSelection || vModel.value.length < props.maxSelection) vModel.value.push(item)
     }
-    vModel.value = clonedValue;
-  };
+  }
 
   const isActiveItem = (item) => {
-    if (multiple) {
-      return returnObject
-        ? vModel.value.some(element => _.isEqual(element, item))
-        : vModel.value.includes(items.indexOf(item))
-    }
-    return returnObject
-      ? _.isEqual(vModel.value, item)
-      : items.indexOf(item) === vModel.value
+    // use isNil because !0 will return true
+    if (_.isNil(vModel.value)) return false
+
+    if (!props.returnObject) item = props.items.indexOf(item)
+
+    if (props.multiple)
+      return props.itemValue
+          ? vModel.value.includes(item[props.itemValue])
+          : vModel.value.includes(item)
+    else
+      return props.itemValue
+        ? vModel.value === item[props.itemValue]
+        : vModel.value === item
   };
 
   return {
@@ -73,16 +64,30 @@ function groupable(props, vModel) {
 export function makeSelectable(props, context) {
   // 1 -> {a: 1, b: 2}
   const convertValueToInternalValue = function (value) {
-    if (!props.itemValue || !value) return value;
-    if (!Array.isArray(props.value)) return props.items.find(i => i[props.itemValue] === value);
-    return props.items.filter(i => value.includes(i[props.itemValue]));
+    if (!props.itemValue || !value) {
+      return value;
+    }
+    if (!Array.isArray(props.value)) {
+      return props.returnObject
+        ? props.items.find(i => i[props.itemValue] === value)
+        : props.items.find(i => i[props.itemValue] === value)[props.itemValue];
+    }
+    if (props.returnObject) {
+      return props.items.filter(i => value.includes(i[props.itemValue]))
+    } else if (props.itemValue) {
+      return value
+    }
   }
 
   // {a: 1, b: 2} -> 1
   const convertInternalValueToValue = function (internalValue) {
-    if (!props.itemValue || !internalValue) return internalValue;
-    if (!Array.isArray(internalValue)) return internalValue[props.itemValue];
-    return internalValue.map(i => i[props.itemValue]);
+    if (!props.itemValue || !internalValue) {
+      return internalValue;
+    }
+    if (!Array.isArray(internalValue)) {
+      return props.returnObject ? internalValue : internalValue[props.itemValue];
+    }
+    return internalValue.map(i => props.returnObject ? i : i);
   }
 
   let rawInternalValue;
@@ -97,6 +102,11 @@ export function makeSelectable(props, context) {
   let ignoreWatchValue = false;
   let ignoreWatchInternalValue = false;
 
+  watch(() => props.multiple, () => {
+    if (props.multiple) rawInternalValue.value = [];
+    else rawInternalValue.value = null;
+  }, {flush: "pre"})
+
   //use when props.value is change from outside
   watch(() => props.value, () => {
     if (ignoreWatchValue) {